I have a wrapper containing 3 divs:
<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-->
'Leftbar' and 'middle' are floating left, while 'rightbar' is floating right within the 'wrapper'. The 'wrapper' has height:100%; clear:both;
set.
An issue arises when there is too much text or content in the 'middle' div, causing it to overflow the 'wrapper' div. I am trying to determine why this is happening.
Here is my CSS:
#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 tips on how to resolve this issue would be greatly appreciated!