CSS Floats - content falling down in IE6

2019-06-27 04:57发布

站内问答 / HTML/CSS
1847 7 4

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 sits nicely to the right of the menu and fills up the remaining space with both menu and content lined up perfectly.

However, in Internet Explorer 6, if the content gets too wide it falls down below the menu. which means you have loads of whitespace and can't actually see any of the content at all without scrolling.

Unfortunately I am not able to make changes to the content - this is a redesign of a site hosting 3rd party content, and changing that content is outside the scope of what I can do.

Also, there is a footer bar that must be underneath both the menu and the content.

I managed to almost get it to work by providing IE6 with a different layout using absolute positioning - unfortunately the footer looks rubbish and as IE6 is the 2nd most used browser on our site I can't really go with that.

I also tried messing around with overflows but ended up causing problems with random scrollbars appearing all over the place which wasn't any good either.

Does anyone know if there is a simple non-Javascript way of doing this that will work in IE6 as well as "proper" browsers? I'm currently thinking that it will have to be a table based layout.

Here's an example of the problem:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
    <head>
        <style type="text/css">
            .menu {
                width: 14em;
                float: left;
            }

            .content {
                margin-left: 15em;
                zoom: 1;
            }

            .footer {
                clear: both;
            }

             /* styling to make the demo more obvious */
            .menu {
                background-color: #f99;
            }
            .content {
                background-color: #9f9;
            }
            .footer {
                background-color: #99f;
            }
            td {
                border: 1px solid #000;
            }
        </style>
    </head>

    <body>

    <div class="container">
        <div class="menu">
            <ul>
                <li><a href="#">menu item</a></li>
                <li><a href="#">menu item</a></li>
                <li><a href="#">menu item</a></li>
                <li><a href="#">menu item</a></li>
            </ul>
        </div>

        <div class="content">
            <h1>Main Content</h1>
                <table>
                    <tr>
                        <td>this is a really</td>
                        <td>wide table which</td>
                        <td>I am using to push</td>
                        <td>the content down</td>
                        <td>need to keep going</td>
                        <td>so that it breaks</td>
                        <td>in ie6</td>
                        <td>but naturally</td>
                        <td>nothing else</td>
                        <td>sghskdhksdhfsdhffs</td>
                        <td>sghskdhksdhfsdhffs</td>
                        <td>sghskdhksdhfsdhffs</td>
                        <td>sghskdhksdhfsdhffs</td>
                    </tr>
                </table>
            </div>
        </div>

        <div class="footer">
            <p>Copyright blah blah blah</p>
        </div>
    </body>
</html>

7条回答
神经病院院长
2楼-- · 2019-06-27 05:33

THanks for the position:absolute idea. This is similar to one solution I almost went with.

The problem here is that the menu will overlay the footer if the menu is longer than the content (and it quite often is). I could try to add an arbitrary height to the content to try to force a minimum height, but I won't really know how big the menu will be. There's the potential for quite a lot going down the side panel in that area.

I presume there's no way to force the relative positioned container to grow in response to the absolute positioned content, is there? Even if it's an IE6 hack, as I can use the float method for other browsers.

(Again, sorry for not posting this as a comment but I don't get that as an option)

查看更多
0人赞 添加讨论(0) 举报
爱情/是我丢掉的垃圾
3楼-- · 2019-06-27 05:39

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.

查看更多
0人赞 添加讨论(0) 举报
够拽才男人
4楼-- · 2019-06-27 05:43

I have run into this so many times that I just try to stay away from floats entirely. That said, there are some things you can do to make them work, but you might have to settle for a fixed with layout and/or some IE6 specific fixes. Here are some things you can try:

  1. This may sound like heresy but tables are not wrong for layout, they're just not cool.
  2. Try setting the 'container' div with a fixed width and auto margins.
  3. If that doesn't work, try a fixed width 'content' div with your fixed width 'container' div.
查看更多
0人赞 添加讨论(0) 举报
做个烂人
5楼-- · 2019-06-27 05:44

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;
}
查看更多
0人赞 添加讨论(0) 举报
做个烂人
6楼-- · 2019-06-27 05:49

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]-->

You can read more on the conditional comments here.

查看更多
0人赞 添加讨论(0) 举报
爱情/是我丢掉的垃圾
7楼-- · 2019-06-27 05:51

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

查看更多
0人赞 添加讨论(0) 举报
1 2 下一页
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)