Clear problem with nested divs in IE6 when inner div width=100%_问答_开发者

Clear problem with nested divs in IE6 when inner div width=100%

开发者 https://www.devze.com 2023-02-27 05:41 出处：网络

I am using a two column layout with the navigation bar placed with float:left.The content div uses margin-left so it sits beside it.

相关专题：css xhtml

I am using a two column layout with the navigation bar placed with float:left. The content div uses margin-left so it sits beside it.

All good, except when I use a div of width 100% inside the content div, it gets shifted down to the bottom of the navigation bar.

This only happens with IE6, every other browser is fine with it (IE7+/FF/Chrome). I wouldn't normally worry about IE6 too much, but this is a biggy because with a long nav bar it looks like the page is empty unless you scroll right down the bottom.

I'm assuming it's the request for 100% width on the inner div that causes the problem, and IE6 is incorrectly seeing that as a request for 100% of the page, not just the containing content div.

Any ideas on a workaround? Live demo at: http://www.songtricks.com/Ie6ClearBug.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<style type="text/css">
* 
{
    margin:0px;
    padding:0px;
}

.left
{
    width:300px;
    float:left;
    background-color:#CFF;
}

.left .navpanel
{
    height:300px;
    width:200px;
    border:solid 1px black;
    margin:10px auto;
}

.right
{
    margin-left:300px;
    background-color:#FFC;
}

</style>

</head>

<body>

    <div class="left">
        <div class="navpanel">navpanel</div>
    </div>
    <div class="right">
        <div style="width:100%;">this should be at the top</div>    
    </div>

</body>
</html>

OK I found an answer. New users can't answer their own questions, so here it is.

Turns out the behavior can be normalised in IE6 by marginally reducing the width of the inner div just to 99% (or making it auto, but then you are at the discretion of the browser as to whether you get full width for the div or not, depending on what's in it).

So the lowest impact solution is to use:

<div class="right">
<div style="width:100%;_width:99%;">this should be at the top</div>
</div>

This leaves normal browsers unaffected, and 开发者_JAVA技巧puts a safe 99% in for IE6.

I'm sorry i don't understand very well your problem, i haven't IE 6..so i cant test your css...but: i can say something about your css. First you'll need to add float: left to your .right class. Second, if u set a margin on the same side of a float, IE doubled the margin. I hope u understand my english..i'm sorry!!

Third: i dont remember exactly but some browser calcuate the border inside the div, other outside the div...so something if u set: div width 300px and border 1px, u can find your div total width is 301px

bye bye