View Full Version : Float problem - how to close the bottom of the div right?

Jan 31st, 2007, 06:06 PM
I want to show a list of items each one includes an image, and text beside it. Here is the code for each item:

<div style="width:500px; padding-bottom:10px; border-bottom:0.05em dashed #5D739A;">
<div style="float:left; margin: 5px 2px 2px 2px;">
<img src='http://www.ha-lool.co.il/uploads/Gen_46/[email protected]~flower.jpg' ALT='הלול התחדש במראה ובתוכן'>
<div style="clear:right; padding:1px 2px 5px 5px">
<h3>Flowers garden</h3>
<p style="margin:0 10px 10px;">This a short text. I'll write a few more words, blah blah blah.</p>

My problem is in cases the text is to short to reach the end of the image. In this case, the border of the first div is showing below the text, instead of showing below the image. How do I fix this?

Jan 31st, 2007, 06:08 PM
I forgot to add the link: http://halool.co.il/test/css1.htm

Jan 31st, 2007, 06:49 PM
You need to clear your floats. Read this: http://www.positioniseverything.net/easyclearing.html

Jan 31st, 2007, 08:38 PM
Thank you! this was very helpfull.

Feb 1st, 2007, 12:35 AM
Some more information:
Containing Floats (http://www.complexspiral.com/publications/containing-floats/) explains the float model.
Clearing Space (http://css-discuss.incutio.com/?page=ClearingSpace) shows other ways of clearing floats, including a method I find easier and cleaner: overflow: auto.

Also, you’ve used the HTML 4.01 Frameset document type declaration for a non‐frames document which is incorrect. You probably want either the Transitional or Strict document type declaration (http://www.w3.org/QA/2002/04/valid-dtd-list.html).