3 column html template - content overflows though there is clear both and height is 100%
- by MeltingDog
I have 3 divs within a wrapper:
<div id="wrapper">
<div id="leftbar">
Lorem ipsum dolar sit amet
</div><!--LEFTBAR-->
<div id="middle">
Lorem ipsum dolar sit amet
</div><!--middle-->
<div id="rightbar">
Lorem ipsum dolar sit amet
</div><!--RIGHTBAR-->
</div><!--wrapper-->
Both 'leftbar' and 'middle' are floating left, whilst 'rightbar' is floating right. 'wrapper' has height:100%; clear:both; set.
However, if there is a large amount of text or content in 'middle' it overflows the 'wrapper' div. I am struggling to figure out why this is occurring.
My CSS is:
#wrapper {
width: 1000px;
height: 100%;
margin:auto;
padding: 30px;
margin-top: 40px;
background-color:#FFF;
color:#000;
border: 2px solid #828fc4;
clear:both;
}
#leftbar {
float:left;
width: 150px;
min-height: 450px;
padding: 5px;
}
#middle {
float:left;
height: 100%;
width: 580px;
padding-left: 20px;
padding-right: 20px;
border-right: 1px dotted #2B308C;
border-left: 1px dotted #2B308C;
}
#rightbar {
float:right;
width: 200px;
min-height: 450px;
padding: 5px;
}
Any advice is appreciated!
EDIT: here is the issue on a test server: http://host.pixelframe.net.au/~pptestco/index.php?id=20
