It's difficult to have dynamic-scaling div's. It would make your life much easier to use a fixed size div.
When you give a div the "100%" height attribute, most of the time it doesn't know what the 100% is compared to. Itself? Its container? The body of the website?
Div's really aren't that smart - and I hate them. But heres one of the easiest solutions, given you know the height of your div. Notice that this sets the container height, rather than the middle div's height.
HTML Code:
<div class="container">
<div id="leftdiv"> </div>
<div id="centerdiv">
<p>This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. </p>
<p>This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. </p></div>
<div id="rightdiv"> </div>
</div>
<style type="text/css">
div.container {width: 500px;
height: 300px; }
#leftdiv {
float: left;
width: 100px;
height: 100%;
background-color: #777;
}
#centerdiv {
float: left;
width: 300px;
height: 100%;
background-color: #CCC;
overflow: hidden;
}
#rightdiv {
float: right;
width: 100px;
height: 100%;
background-color: #777;
}
</style>
|
