CSS simple float left problem in IE compatability mode_问答_开发者

CSS simple float left problem in IE compatability mode

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

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).

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 xmln开发者_C百科s="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.