Internet Explorer 7 Float Bug

Today while developing a WordPress theme for a client, I ran into a vexing Internet Explorer 7 bug. Anyone who’s done any website design is familiar with Internet Explorer 6 (or earlier) wreaking havoc with standards-compliant work that looks good in, say, Firefox. But thankfully IE 7 has for the most part been a big improvement over its predecessor. That’s what made this bug so strange: it didn’t affect IE 6, just IE 7.

Internet Explorer 7 Float Bug

The first image shows a screenshot of the problem: the title of the post is drooping into the post. Usually when you see something like this, it means that the containing element has not been cleared. There are a number of ways to clear an element: a popular fix these days uses a pseudo class; the classic approach has been to put a cleared element within the same element as the floating element, but after it. Neither fix works for this bug.

Thankfully, I found a demonstration of a similar problem with IE 7. Apparently if the element containing the floating element has a set height or a maximum height, it confuses IE 7. According to the standard, a browser should obey the CSS height of the element (and IE 7 does—good job!—unlike IE 6). But every cleared element after the floater should be pushed down, not overlapped, by the floater.

The solution is to remove the height assignment from the container element, if you can. In my case, for another part of the site experiencing the same problem, I needed the element to have enough height to show a background image. The solution was to use the min-height property, which doesn’t trigger the bug.

The final image shows what it should look like, as rendered by Firefox.

Firefox does not have IE 7’s float bug


  1. thank you so much for this! i was doing a website, and i couldn’t figure out why everything was so screwy in IE7 when supposedly everything was supposed to be BETTER in IE7… got rid of the width, and everything lines up perfectly, in BOTH browsers!

  2. Awesome… thanks so much for the help! Always nice when a friend provides a solution. :)

  3. Thanks for the information, really helped. I’d not come across this before so could not figure out what was going wrong!
    Good work.

  4. Well, I had an issue like this. Two elements, both floated and one floated inside the other. Removing the height property did not help things though.I wonder if I am experiencing the same bug after all. Adding a clear property to either did not help either….

  5. Thanks for the post! It helped me finding the problem. my last problem with browsers compatibility was with IE7, removing height did the trick.

  6. Yeah I always avoid putting heights on my elements. If you add the clear float fix to all block level elements except for the footer and p element it should automate everything for you. Check out my article I wrote on it clear float

  7. thanks so much for this, spent ages thinking I needed an updated version of the clearfix hack only to find I’d reused an element with a set height.

  8. I wasn’t aware of that bug, so thank you, this saved the day.

  9. A huge thank you for this. With one change from “height” to “min-height” my WordPress page was converted from a total mess in IE7 to a beautiful thing. This has saved me HOURS of work.

  10. Well done! Thanks for sharing. And great job on your wordpress theme design.

  11. That’s really more a problem with CSS. No browser in IE7′s time was able to support CSS5.

  12. i need some help how i stop my banner form floating to the right?

    @charset “utf-8″;
    /* CSS Document */

    :focus {
    outline: 0;

    body {
    background: #222;
    margin: 0; padding: 0;
    font: normal 10px Verdana, Arial, Helvetica, sans-serif;
    *{outline: none;}
    img {border: 0;}
    .container {
    width: 790px;
    padding: 0;
    margin: 0 auto;
    .folio_block {
    position: absolute;
    left: 50%; top: 50%;
    margin: -140px 0 0 -395px;

    /*–Main Container–*/
    .main_view {
    float: left;

    /*–Window/Masking Styles–*/
    .window {
    width: 722px;
    overflow: hidden; /*–Hides anything outside of the set width/height–*/
    position: relative;

    .image_reel {
    position: absolute;
    top: -1px;
    left: 2px;
    width: 3630px;
    .image_reel img {

    /*–Paging Styles–*/
    .paging {
    position: absolute;
    bottom: 40px; right: -7px;
    width: 178px; height:47px;
    z-index: 100; /*–Assures the paging stays on the top layer–*/
    text-align: center;
    line-height: 40px;
    background: url(menu-banner/paging_bg2.png) no-repeat;
    display: inline; /*–Hidden by default, will be later shown with jQuery–*/

    .paging a {
    padding: 3px;
    text-decoration: none;
    color: #fff;
    .paging {
    font-weight: bold;
    background: #fa5400;
    border: 1px solid #04355a;
    -moz-border-radius: 3px;
    -khtml-border-radius: 3px;
    -webkit-border-radius: 3px;

    .floatbox {
    float: left;
    width: 500px;
    height: 150px;
    margin: 5px 0 5px 100px;
    display: inline;
    .paging a:hover {font-weight: bold;}

    .item {
    margin: 5px;
    padding: 10px;

  13. Thank you. I was trying to resolve that for hours

  14. Fixed my ie7 float problem by adding a min-height property even though I did not have an explicit height set. Good stuff, thanks for the post.

  15. my site works in every browser but IE 7. apparently IE 7 can’t handle my CSS. i’ve tried applying the fix discussed on this page but i’ve had no luck. i hope it’s okay if i post a link to the dev site ….

    any help would be appreciated


  16. IE really has a lot of bugs and other browsing problems. Maybe Windows should make a way to minimize or eliminate these type of problems so users will never have to use other browser.

  17. I really wana thank you for providing such informative and qualitative material so often and Your articles are very well written and unique.wireless satellite internet

  18. Thank you for this! I spent a lot of time trying to figure this out until I read your post.

  19. The solution was to use the min-height property, which doesn’t trigger the bug.

  20. Eliminating the size residence did not help factors though. I wonder if I am suffering from the same bug after all. tree swings

  21. In my situation, for another aspect of the website suffering from the same issue, I required the factor to have enough size to demonstrate a qualifications picture. s4 wallpaper

  22. I needed the element to have enough height to show a background image. The solution was to use the min-height property, which doesn’t trigger the bug. Agen Togel

  23. In my case, for another part of the site experiencing the same problem, I needed the element to have enough height to show a background image. na dobry sen

  24. No content is comparable and admirable then this mentioned for the explanations, a must one to read for everyone and get assisted a lot. it support london

Post a Comment

Your email is never shared. Required fields are marked *


23 Trackbacks