Clearing Floats Help Please

Discussion in 'CSS' started by wd_2k6, Oct 15, 2008.

  1. #1
    Hi, how do I clear a float, if the last thing is a float.

    For example I have

    <div id="wrap">
    Stuff
    More Stuff
    <div id="myfloatedthing">Even More Stuff</div>
    </div>

    And for the border of wrap to stretch to the bottom the floats have to be cleared before the DIV is closed, but the last element is being floated.

    I know I could add a clearing DIV, or clear it with a <br clear"all" /> at the end, but is there no other way without the extra markup?
     
    wd_2k6, Oct 15, 2008 IP
  2. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #2
    kk5st, Oct 15, 2008 IP
  3. wd_2k6

    wd_2k6 Peon

    Messages:
    1,740
    Likes Received:
    54
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Cheers Gary, I decided to float the parent container as I was able to do so.

    Thanks for the help again.
     
    wd_2k6, Oct 15, 2008 IP
  4. risoknop

    risoknop Peon

    Messages:
    914
    Likes Received:
    24
    Best Answers:
    0
    Trophy Points:
    0
    #4
    I usually clear floats in the stylesheet, just clear the block element that comes right after the floated element in the HTML.

    Unfortunately, it doesn't always work in all browsers... so sometimes I need to use a clearing div or clear the float with and inline CSS some other way...
     
    risoknop, Oct 15, 2008 IP
  5. emzdesign

    emzdesign Peon

    Messages:
    538
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    0
    #5
    I usually create a class called .clear and when I need to use it I just have <div class="clear"></div>. I know it's extra markup but it makes it easier and more organised for me.
     
    emzdesign, Oct 16, 2008 IP