Clearing floats

Hi everyone,

I know I’ve asked float questions before but I’m still a bit confused as to how they work. In the code below, the image is floating to the left of the following p tag which contains a description. This is ok but I’m finding that if there’s not enough text in the p tag then the text from within the div with a class of “close-space” (beneath the p tag) is also being positioned to the right of the floated image. I need the information contained in the div to always remain beneath the image and the p tag text to the right of the image. Can anyone tell me how to to do this? I’m not sure if clear: right or something would work but I’m not sure which element to place it on in order to fix the problem.

I’d really be grateful for any advice.

 <img src="image.jpg" style="float: left; padding: 0 20px 20px 0; height: 170px;" /> 
 <p>{tag_description}</p>
<div class="close-space">
<p><strong>Date:</strong> {tag_day of week}, <span class="long-date">{tag_Event Date}</span>
</p>
<p><strong>Time:</strong> {tag_event time}</p>
<p><strong>Venue:</strong> {tag_event venue}</p>
<p id="eventDinner"><strong>Dinner:</strong><span id="eventDinnerText"> {tag_event dinner description}</span>
</p>
<p id="eventRefresh"><strong>Refreshments:</strong><span id="eventRefreshText"> {tag_event refreshments}</span>
</p>
<p id="eventCost">  </p>
<p id="eventRSVP"><strong>RSVP:</strong><span id="eventRSVPText"> {tag_rsvp}</span>
</p>
`

Just add clear: both to the div. That will force it to clear any floated items that come before it. (clear: left will also do the same thing.)

.close-space {clear: both;}

clear: right won’t work, because the image isn’t floated to the right. clear: left on the div works because the image is floated left (so clear: left tells the div not to let an element float to the left of it. clear: both covers you for elements floated either side.

That’s perfect - thanks so much, I really appreciate it.

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.