html div叠在一起,重叠父div的HTML/CSS div

因此，我已经构建了多个站点，可以随时解决这个问题。但是这次我陷入了困境。重叠父div的HTML/CSS div

我有一个包装div，在这个div内我有两个div。当内部div超过包装div的长度时，它只是重叠它。我的目标是包装div获得与内部div相同的高度。

这里是我使用的代码：

Content

Very long

Links

Copyright

以及相应的CSS：

/*==============================

SITE RESETS

===============================*/

html {

margin: 0px;

padding: 0px;

font-family: Calibri, arial;

}

body{

margin: 0px;

padding: 0px 0px 50px 0px;

border: 0px;

background: url('img/background.png');

}

a img { border:none; }

#longDiv{

height: 2000px;

color: white;

background-color: black;

}

/*==============================

SITE WRAPPER

===============================*/

#wrapper{

width: 1200px;

margin: 0px;

padding: 0px;

border: 0px;

}

#site-wrapper{

width: 970px;

margin: 0px 0px 30px;

padding: 0px;

border: 0px;

position: relative;

background-color: #ebebeb;

left: 115px;

top: 30px;

}

#header{

clear: both;

min-width: 970px;

width: 100%;

height: 190px;

margin: 0px;

padding: 0px;

border: 0px;

background: #fff url('img/header.png');

background-repeat: repeat-x;

position: relative;

top: 30px;

}

#colpos{

clear: both;

float: left;

height: 100%;

min-height: 100px;

width: 920px;

padding: 50px 20px 20px 20px;

margin: 0px;

border: 0px;

}

#columnLeft

{

float: left;

width: 620px;

height: 100%;

min-height: inherit;

margin: 0px;

padding: 0px;

border: 0px;

}

#columnRight

{

float: right;

width: 265px;

height: 100%;

min-height: inherit;

margin: 0px;

padding: 0px;

border: 0px;

}

/*==============================

Content

===============================*/

#mainWrap{

float: left;

width: 100%;

height: 100%;

min-height: inherit;

margin: 0px;

padding: 0px;

background: white;

border: 1px solid #689e9f;

}

#contentBar{

float: left;

min-width: 620px;

width: 100%;

min-height: 23px;

margin: 0px;

padding: 0px;

border: 0px;

background: #689e9f url('img/content.png');

background-repeat: no-repeat;

}

#main{

clear: both;

height: 100%;

min-height: inherit;

float: left;

margin: 5px 5px 5px 5px;

max-width: 620px;

height: inherit;

font-family: Calibri, arial;

}

#links{

float: left;

width: 100%;

min-height: 250px;

margin: 0px;

padding: 0px;

background: white;

border: 1px solid #689e9f;

}

#navBar{

float: left;

min-width: 265px;

width: 100%;

min-height: 23px;

margin: 0px;

padding: 0px;

border: 0px;

background: #689e9f url('img/nav.png') right;

background-repeat: no-repeat;

}

#footer

{

clear: both;

margin: 10px 10px 10px 10px;

width: 50%;

position: relative;

top: 0.5em;

left: 25%;

font-family: Calibri, arial;

color: white;

text-align: center;

font-style: italic;

background-color: #689e9f;

}

我已尽可能多的我的代码尽可能地，我希望你们中的一个能够指出我犯的错误。我通常不是有人在网上寻求帮助，但这个问题一直困扰着我足够长的时间。

由于提前， EvilTuinhekjeNL

2011-11-01

Rob

+0

它只停留在我的浏览器中(Chrome Canary)的内容 - > http://jsfiddle.net/RCFdz/ –