CSS simple float left problem in IE compatability mode

StackOverflow https://stackoverflow.com/questions/4792859

문제

I'm trying to get two boxes side by side (A 200px left menu, and next to it a 100% remaining width main content area).

It works fine in all browsers, but a lot of our clients are using IE6 (nothing we can do about it unfortunatly), so this must support IE compatability mode. Unfortunatly, this simple CSS does not work! Can anyone help me without me needing to resort back to tables?

Relevant CSS:

.clear {
    clear:both;
}

/* Left menu */
.leftMenu{
    width: 200px;
    border:1px solid green;
    height:100px;
    float:left;
}

/* Main Content area */
.mainBox{
    width:100%;
    border:1px solid red;
}
.mainWrapper{
}




<!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><title>



</title><link rel="stylesheet" type="text/css" href="css/default.css" /></head>



<body>

    <form name="form1" method="post" action="default.aspx" id="form1">

<div>

<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKLTIwNjAyODU4M2Rk5phxJ78Kc9Kf0nXvcJ7j7tQJPxw=" />

</div>

    <div class="mainWrapper">

        <div class="leftMenu">

        left

        </div>

        <div class="mainBox">

        main

        </div>

        <div class="clear"></div>

    </div>



    </form>

</body>

</html>
도움이 되었습니까?

해결책

Don't have IE6 so cannot test, but anyway. Try removing width: 100% from .mainBox and also remove all borders and instead use background color for testing. I got it to work in IE7 standards that way.

.mainBox is a DIV that does not have any floats so it is implicitly 100% wide. Also the borders add to the width so may cause unexpected behavior while testing.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top