WhiteSites Blog

CSS float overlap with div border solution

Posted on May 5, 2009 by Paul White

If you have spend more than 5 minutes working with CSS you have most likely come across the issue with Internet explorer not liking to play nice with your floated images and divs.  The result is your images will float outside the border of its containing div.  After 2 trips to the espresso machine, and 10 hours later,  I found the solution.  And no it has nothing to do with the clear:both;

The solution is to use overflow:auto; on the container div.  This will force it to stretch and contain your floated images and divs.  Hope this saves other people some time.

Permalink
10920 Visitors
10920 Views

Categories associated with CSS float overlap with div border solution

    Discussion

    chad | May 29, 2009 5:40 PM
    oh man, this is exactly the info I needed. Was about to go crazy figuring this out!
    Andrea | Jun 23, 2009 1:58 PM
    Thanks for the tip! You saved me a lot of trouble :-)
    Trey | Jun 26, 2009 12:38 PM
    Man you saved me some time. Thanks,
    Alex | Nov 12, 2009 6:54 PM
    Hooray!  You saved the day.
    Dobiatowski! | Sep 10, 2010 2:55 AM
    it is fantastic ;) 'till today i was using clear:both for that and it was so problematic.
    Iliyan | Sep 13, 2010 7:04 AM
    Fuckin Great Man !!!
    Marc | Jan 8, 2011 7:23 PM
    Wow, Thank you so much, you solved my problem and probably helped hundreds of others as well. Big Thanks

    Justin Ryan | Mar 21, 2011 2:24 PM
    YOU THE MAN!! I've been struggling with this for days now and I was just about to put my head through the monitor before I finally found your post.

    By the way, how did you determine this? I thought I was fairly decent at floats when I need them, but this one stumped me good.

    Thank again for posting.
    Paul | Mar 21, 2011 3:14 PM
    Glad this helped everyone out.
    Justin, after way too much caffeine and 10 hours doing trial and error I figured it out.
    Norm | Apr 12, 2011 8:10 PM
    I don't imagine any of us know why this works???  But after hours of trial & error, I sure am glad I ran across this post. THX.....
    romain | Apr 26, 2011 8:39 AM
    Dude you just saved me hours of thinking! thanks :) 
    Justin Nahin | Jul 20, 2011 1:28 AM
    Wow, thank you so much!  This solved a ton of layout problems instantly!
    Geoff Stacey | Aug 6, 2011 5:55 AM
    I would echo everything above. You are a genius. Thanks for that. You have saved innumerable hours of hair-tearing.
    Sam | Aug 7, 2011 3:05 PM
    Thanks man!! I was going crazy and I started to believe in supernatural causes when this solved my problem. I've never had this problem with overflow though I had several adventures with css.
    Artem Russakovskii | Nov 4, 2011 7:41 PM
    Exactly what I was looking for.
    Jeremy Edmondson | Dec 28, 2011 2:53 PM
    Thanks. This fixed my exact problem. Saved me hours...
    name
    Email Needed to confirm comment, but not made public.
    Website
     
     
    When you Post your Comment, you'll be sent a confirmation link. Once you click this link your thoughts will be made public.. Posts that are considered spam will be deleted, Please keep your thoughts and links relavent to this Article