Css Floats - Content Falling Down In Ie6

June 22, 2024 Post a Comment

I have a layout with a menu DIV on the left. This is floated left with a fixed EM width. I then have a content DIV which has a left margin of more than the menu's width. So it s

Solution 1:

As you mentioned you already tried position absolute. But I'll tried the following and it might work for you. Here is the CSS:

.container {
    position:relative;
}
.menu {
    width: 14em;
    position:absolute;
    top: 0;
    left: 0!important;
    left: -15em;
}

.content {
    margin-left: 15em;
}
.footer {
}

Some explanation: The menu is positioned absolute, independent of the other content. However, IE puts the menu relative to the "content" div, and hides it behind the "content" div. The work around is to position it negatively, just as many em's to the left as the content div has "margin-left". But this should only done for IE, so therefor the "left 0 !important" is added (but before the negative left), which works because IE ignores "!important" while the other browers do acknowledge it and will use "left 0".

Update:

As Alohci notes a better way would be to use the "* html" hack, in that case the CSS for "menu" becomes:

.menu {
    width: 14em;
    position:absolute;
    top: 0;
    left: 0;
}

* html.menu {
     left: -15em;
}

Solution 2:

Why not use an established layout for eg http://layouts.ironmyers.com/

or you might want to investigate this css overflow

Have a look at this, does it help?

EDIT:

Try one of these fixes: (you could use some conditional code like @Blake suggested)

overflow:scroll -- this makes sure your content can be seen at the cost of design (scrollbars are ugly)

overflow:hidden -- just cuts off any overflow. It means people can't read the content though.

.content {
        margin-left: 15em;
        zoom: 1;
        overflow:scroll  
        /* overflow:hidden *//* probably second best */
}

Try looking at this one How to prevent long words from breaking my div? is this your problem?

Solution 3:

Use some conditional comments for IE6 to read and place in the necessary CSS to fix the width of the problematic divs like so:

<!--[if IE 6]>
IE 6 specific stuff goes here. You can load a specific stylesheet here, or just have inline css
<![endif]-->

Solution 4:

Removing the zoom: 1; makes it work just fine for me in IE6.

Solution 5:

Too late, but usually i get flots fixed by adding or an absolute width (a number in pixels, points or any hard measure system instead on em, % and so) or sometimes to put a min-width property solves it, also, beware of padding and borders because of the boxmodel sum.

Html5 Pros