Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Apr 2006
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Float problem - how to close the bottom of the div right?

    hello,
    I want to show a list of items each one includes an image, and text beside it. Here is the code for each item:
    Code:
    <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/19012007212342~@~flower.jpg' ALT='הלול התחדש במראה ובתוכן'>
    	</div>
    	<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>
    	</div>
    </div>
    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?

  • #2
    New to the CF scene
    Join Date
    Apr 2006
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I forgot to add the link: http://halool.co.il/test/css1.htm

  • #3
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    You need to clear your floats. Read this: http://www.positioniseverything.net/easyclearing.html
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #4
    New to the CF scene
    Join Date
    Apr 2006
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you! this was very helpfull.

  • #5
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,387
    Thanks
    32
    Thanked 288 Times in 282 Posts
    Some more information:
    Containing Floats explains the float model.
    Clearing Space 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.
    For every complex problem, there is an answer that is clear, simple, and wrong.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •