CODEWITHSUNDEEP
htmlcss
rumtscho
rumtscho

Reputation: 2524

Cannot force a line break after a row of images

In a blog post (for the Cooking Stackexchange blog, so a normal WordPress instance with only a few plugins), I inserted three images, aligned to "left", and want them to take up their own row. I want the text to start below them.

No matter what I try, (I inserted the <p>, <br> and <div> tags you see in the code manually) the text starts on the same row as the images, looking terrible. What can I do?

The wrong layout

The code which produces the screenshot above: 

<p> I expected a bigger difference between these 3 methods. The silicone mat browned the cookies a bit
less than the other methods – so it can provide a little insurance if
you’re afraid of burnt cookies. </p> 
<div><img class="wp-image-870 alignleft" style="margin-left: 2px; margin-right: 2px;" title="baking sheet cookies" src="http://cooking.blogoverflow.com/files/2012/08/IMG_3784-225x300.jpg" alt="Cookies baked on baking sheet" width="225" height="300" /><img class="wp-image-869 alignleft" style="margin-left: 2px; margin-right: 2px;" title="silpat cookies" src="http://cooking.blogoverflow.com/files/2012/08/IMG_3787-225x300.jpg" alt="" width="225" height="300" /><img class="alignleft size-medium wp-image-868" style="margin-left: 2px; margin-right: 2px;" title="parchment paper cookies" src="http://cooking.blogoverflow.com/files/2012/08/IMG_3790-225x300.jpg" alt="" width="225" height="300" /><br/></div>
&nbsp;
<p>I’m going to stick with parchment paper, because it offers one big
advantage over the bare sheet and silicone mat:

Upvotes: 3

Views: 7124

Answers (4)

fuxia
fuxia

Reputation: 63556

Giv p a min-width to avoid very short orphans:

p {
    min-width: 10em;
}

Upvotes: 0

TheDeadMedic
TheDeadMedic

Reputation: 9997

Try this instead - don't need the clear, and the images will appear horizontally justified too:

<p>I expected a bigger difference between these 3 methods. The silicone mat browned the cookies a bit less than the other methods – so it can provide a little insurance if you’re afraid of burnt cookies.</p> 
<p style="text-align: center;"><img class="wp-image-870 alignleft" title="baking sheet cookies" src="http://cooking.blogoverflow.com/files/2012/08/IMG_3784-225x300.jpg" alt="Cookies baked on baking sheet" width="225" height="300" /><img class="size-medium wp-image-868 alignright" title="parchment paper cookies" src="http://cooking.blogoverflow.com/files/2012/08/IMG_3790-225x300.jpg" alt="" width="225" height="300" /><img class="wp-image-869" title="silpat cookies" src="http://cooking.blogoverflow.com/files/2012/08/IMG_3787-225x300.jpg" alt="" width="225" height="300" /></p>
<p>I’m going to stick with parchment paper, because it offers one big advantage over the bare sheet and silicone mat:</p>

Upvotes: 1

Vince P
Vince P

Reputation: 1791

Add clear:both to the CSS styling for that division.

Also why not add a class for the images in that division, then you wont have to use the style="" inline styling, if you decide you want a margin of 3px in the future you just change it in your stylesheet rather than having to go back through all the previous posts.

Upvotes: 1

Tom Willmot
Tom Willmot

Reputation: 85

You need to clear the float after the <img /> to force <div /> to properly calculate height.

To do that add style="overflow:hidden; to the opening <div> tag, so the updated code would look like this:

<p> I expected a bigger difference between these 3 methods. The silicone mat browned the cookies a bit less than the other methods &ndash; so it can provide a little insurance if you're afraid of burnt cookies. </p>

<div style="overflow:hidden;">
    <img class="wp-image-870 alignleft" style="margin-left: 2px; margin-right: 2px;" title="baking sheet cookies" src="http://cooking.blogoverflow.com/files/2012/08/IMG_3784-225x300.jpg" alt="Cookies baked on baking sheet" width="225" height="300" />
    <img class="wp-image-869 alignleft" style="margin-left: 2px; margin-right: 2px;" title="silpat cookies" src="http://cooking.blogoverflow.com/files/2012/08/IMG_3787-225x300.jpg" alt="" width="225" height="300" />
    <img class="alignleft size-medium wp-image-868" style="margin-left: 2px; margin-right: 2px;" title="parchment paper cookies" src="http://cooking.blogoverflow.com/files/2012/08/IMG_3790-225x300.jpg" alt="" width="225" height="300" />
</div>

<p>I'm going to stick with parchment paper, because it offers one big advantage over the bare sheet and silicone mat:</p>

You can find more details about floats here: http://css-tricks.com/all-about-floats/

Upvotes: 4

Related Questions