div侧边栏重叠体

时间:2013-12-06 17:02:18

标签: css html layout sidebar

侧边栏与身体重叠。我需要根据侧栏div和它的背景推动身体div。我有一个jsfiddle链接 link,其中html代码为:

<div class="container">
    <div class="top_block lo2_header">
        <div class="content">
            asdasdfasdfasdfasdfsadfasdasdfasdfasdfasdfsadfasdasdfasdfasdfasdfsadfasdasdfasdfasdfasdfsadfasdasdfasdfasdfasdfsadf<br>
        </div>
    </div>        
    <div>
    <div class="background lo2_lbar">
    </div>
    <div class="left_block lo2_lbar">
        <div class="content">asdasdfasdfasdfasdfsadfasdasdfasdfasdfasdfsadfasda
        asdasdfasdfasdfasdfsadfasdasdfasdfasdfasdfsadfasdasdfasdfasdfasdf<br>
        asdasdfasdfasdfasdfsadfasdasdfasdfasdfasdfsadfasdasdfasdfasdfasdf<br>
        </div>
    </div>
    <div class="background lo2_body">
    </div>
    <div class="center_block lo2_body">
        <div class="content">lo2_body
        asd<br> asd<br>asd<br>asd<br>asd<br>asd<br>asd<br>asd<br>   asd<br>asd<br>asd<br>asd<br>asd<br>asd<br>
        </div>
    </div>
    </div>

    <div class="bottom_block lo2_footer">
        <div class="content">lo2_footer
        </div>
    </div>
</div>

2 个答案:

答案 0 :(得分:0)

因为你所拥有的只有3个字!

asdasdfasdfasdfasdfsadfasdasdfasdfasdfasdfsadfasda是一个很长的词。

答案 1 :(得分:0)

body{
width:900px;
background:#e9e9e9;
height:400px;
}


.content{
float:left;
width:65%;
margin-left:3%;
background:red;
height:100%;
}




#header{
width:100%;
height:20%;
background:blue;
margin-bottom:1%;
}

#wrapper{
width:100%;
height:100%;
}

#container{
width:100%;
height:60%;
margin-bottom:1%;
}



.sidebar{
  float:left;
width:25%;
margin-left:1%;
background:yellow;
height:100%;
}

#footer{
margin-top:3px;
clear:both;
background:#FF8C00;
width:100%;
height:10%;

 }