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>
`