SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Wizard
    Join Date
    Apr 2002
    Posts
    2,301
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)

    underneath, clearing both elements regardless of their depth somehow

    Hello,

    The div that encloses the two paragraphs in the below example has a border line on its bottom to signify the end of the item. If the text is shorter (vertically) than the image the line that's on the div follows on directly after the text and the image hang below the line. How can I make the line appear after both the image and text regardless of which is the deeper?

    TIA

    Code:
    div.item { border-bottom: 2px solid #333; }
    p.left { float: left; }
    
    
    <div class="item">
    
    <p class="left">
    <img src="animage.jpg" />
    </p>
    
    <p>
    Some text, some text, some text, some text, some text, some text ...
    </p>
    
    </div>

  2. #2
    SitePoint Enthusiast
    Join Date
    Oct 2006
    Posts
    45
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Something like this should do it:
    Code:
    div.item { border-bottom: 2px solid #333; }
    p.left { float: left; }
    .clear { clear: both; }
    
    <div class="item">
    
    <p class="left">
    <img src="animage.jpg" />
    </p>
    
    <p>
    Some text, some text, some text, some text, some text, some text ...
    </p>
    <div class="clear"></div>
    </div>

  3. #3
    SitePoint Wizard
    Join Date
    Apr 2002
    Posts
    2,301
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    great -- thanks

  4. #4
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There are better clearing techniques that don't require extra markup. Read up on clearing and containing floats.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  5. #5
    SitePoint Wizard
    Join Date
    Apr 2002
    Posts
    2,301
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Ah yes I was wondering if there might be a way to do it without additional mark up.

    The solution here: http://www.quirksmode.org/css/clearing.html that just adds
    overflow: auto;
    width: 100%;
    to the containing div seems the neatest and cleanest. Does it work OK in IE 6 for the PC?

    Thanks.


Bookmarks

Posting Permissions

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