问一个DIV+CSS布局的问题~

我的布局如下:        <div id="box">
            <div id="left">
                <div id="left1">   </div>
                <div id="left2">   </div>
            </div>
            <div id="main">        </div>
            <div id="bottom">      </div>
        </div>
但是如果main或者left2的内容超长~就会跟下面的bottom层重叠了~就是说没有自动撑大~而是直接穿过去了~~应该怎么解决哦??CSS如下:body {
}#box { 
width:926px; 
margin:0 auto; 
} 
#box #left 
{
    margin-top:5px;
float: left; 
width: 125px; 
height:200px; } 
*html #box #left1 { 
float: left; 
width: 125px; 
height:200px; } 
*+html #box #left1 { 
float: left; 
width: 125px; 
height:200px; } #box #main { 
float: left; 
width: 500px; 
height: 500px; 
}
*html #box #main 
{float: left; 
margin : 5px auto auto 5px ;
width: 450px; 
height: 500px; 
}
*+html #box #main { 
float:left; 
margin : 5px auto auto 75px ;
width: 450px; 
height: 500px; 
} 
#box #bottom { 
clear: both; 
} 
*#box #bottom 
{} 
*+html #box #bottom 
{
 clear:left;
} 各位大大`这个问题弄了几天了`网上资料也没有`那个郁闷呢`100分悬赏啊!!!555555555

解决方案 »

  1.   


    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
        <title>未命名頁面</title>
        <style type="text/css">
        body { 
    } #box { 
     
    width:926px; 
    margin:0 auto; 
    } 
    #box #left 
    { 
        margin-top:5px; 
    float: left; 
    width: 125px; 
    height:200px; } 
    *html #box #left1 { 
    float: left; 
    width: 125px; 
    height:200px; } 
    *+html #box #left1 { 
    float: left; 
    width: 125px; 
    height:200px; } #box #main { 
    float: left; 
    width: 500px; 
    height: 500px; 
    } 
    *html #box #main 
    { float: left; 
    margin : 5px auto auto 5px ; 
    width: 450px; 
    height: 500px; 
    } 
    *+html #box #main { 
    float:left; 
    margin : 5px auto auto 75px ; 
    width: 450px; 
    height: 500px; 
    } 
    #box #bottom { 
    clear: both; 
    width: 450px; 
    height: 50px;
    margin-left:10px;
    } *+html #box #bottom 
    { 
    clear:left; 
    } 
    #right
    {
     float:left;
    }
        </style>
    </head>
    <body >
        <form id="form1" runat="server"> <div id="box"> 
                <div id="left"> 
                    <div id="left1">  </div> 
                    <div id="left2">  </div> 
                </div> 
                <div id="right">
                    <div id="main">        </div> 
                    <div id="bottom">      </div> 
                </div>
            </div>     </form>
    </body>
    </html>
      

  2.   

    确定你的DIV的position是相对而不是绝对的，
    如果是绝对的话，那相互间就不会受内容长度的影响，可能会重叠
      

  3.   

    限制长度，同时启用POSITION中的定位ABSOLUTE定位。
      

  4.   

    你的代码我没有测试过，但粗看应该是你的float属性的原因。因为用了float，html元素就会脱离标准流。假如你的left是用了float，那么就会像飘起来一样，即使里面left1或者left2很大也不会撑大left
      

  5.   

    DIV绝对定位 就不会出现 穿透的问题了！
      

  6.   

    不要定义height,将它去掉，只定义WIDTH
      

  7.   

    用楼上的方法，或者将height设为auto
      

  8.   

    用个<DIV><table 这边写你的CSS样式的对齐>  这里面你把DIV放进来。。这样告TABLE来定位也可以  </table> </div>
      

  9.   

    你这样做肯定乱。css要定义一下再用。
    给你一个代码。放到一个文件里。以后每个css文件都调用它body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { padding:0px; margin: 0px;}
    table {border-collapse: collapse;border-spacing: 0;}
    fieldset,img { border: 0;}
    address,caption,cite,code,dfn,em,strong,th,var {
     font-weight: normal;
     font-style: normal;
     }
     div{position :relative;}
    ol,ul {list-style: none; margin :2px;}
    caption,th {text-align: left;}
    h1,h2,h3,h4,h5,h6 {font-weight: normal;font-size: 100%;}
    q:before,q:after {content:'';}
    abbr,acronym { border: 0;}
    span{ padding :2px;}