As you can see, the picture actually follow the previous layout. And followed by a new paragraph that begins with a header. There's an empty space between thesecond paragraph, so the post look neat.
Not as easy as you see to make a layout like that, at least I have a hard time before finally found the solution. I've take two days to find a solution to make these layouts! Which of course I will share today.Maybe just because I was stupid, but obviously I want to share what I've found here.
If you think that only by placing images within the DIV tag (since DIV has display block level), you're wrong. What you'll get is like this :
Block after the images that are beyond the DIV tag stays beside the image. This is because image has been left floated by default so that the image will automatically be docked to the picture.
What's the solution? This is it!
<hr style="clear: both; visibility: hidden;" />Put that code before block that you want to be put under the image. We use little trick here! Just by using HR tag to clear the float set on both left and right side, and hide it.
Its easy, right? At least after you know it, or maybe because I know it's too late. I hope this helps and if you have questions, please leave a comment.
