I've decided to replace my original page about boxes of equal height as that uses javascript. Although it works very well and it's easier to implement than this method, it's probably better to use CSS to do this, so here goes...
It uses images for the borders. People use the same basic idea to create boxes with curved or rounded borders. This is just extending that idea to make two boxes instead of one.
Of course, to use this, you have to have fixed widths. If you want boxes that are dotted around the page in a fluid layout to be equal height, then I think the javascript option is still valid.
The top and bottom are regular divs with borders and margins.
Then there's a middle section that looks like this :
<div id="middlebit">
<div class="topbot"></div>
<div id="leftbit">
<p>the left</p>
</div>
<div id="rightbit">
<p>the right</p>
</div>
<div class="topbot"></div>
</div>
The #middlebit has a repeating background to make the vertical borders.
.topbot is another image which makes the horizontal borders.
The right
This would be a footer
CSS
#topbit {
border:1px solid #96f;
margin-bottom:5px;
}
#pagewrapper{
position:relative;
width: 400px;
margin:auto;
}
#leftbit{
padding:5px;
width: 285px;
float: left;
}
#rightbit{
padding:5px;
margin-left: 300px;
position: relative;
}
* html #rightbit {
height:1px;
}
#bottombit{
margin-top:5px;
padding:5px;
border: 1px solid #96f;
position: relative;
margin-top:5px;
clear:both;
}
#middlebit {
background:url(96f-v.gif) repeat-y;
}
.topbot {
background:url(96f-h.gif);
height:1px;
font-size:0;
clear:both;
}
#bottombit {
text-align:center;
}
HTML
<div id="equalheightcss">
<h1>Boxes of equal height</h1>
<p>I've decided to replace my <a href="?page=fixH">original page</a> about boxes of equal height as that uses javascript. Although it works very well and it's easier to implement than this method, it's probably better to use CSS to do this, so here goes...</p>
<p>It uses images for the borders. People use the same basic idea to create boxes with curved or rounded borders. This is just extending that idea to make two boxes instead of one.</p>
<p>Of course, to use this, you have to have fixed widths. If you want boxes that are dotted around the page in a fluid layout to be equal height, then I think <a href="?page=fixH">the javascript option</a> is still valid.</p>
<div id="pagewrapper">
<div id="topbit">
<h2>The header goes here</h2>
</div>
<div id="middlebit">
<div class="topbot"></div>
<div id="leftbit">
<p>The top and bottom are regular divs with borders and margins.</p>
<p>Then there's a middle section that looks like this : </p>
<code class="centre"><div id="middlebit"><br />
<div class="topbot"></div> <br />
<div id="leftbit"><br />
<p>the left</p> <br />
</div><br />
<div id="rightbit"><br />
<p>the right</p><br />
</div><br />
<div class="topbot"></div> <br />
</div></code>
<p>The #middlebit has a repeating background to make the vertical borders.</p>
<p>.topbot is another image which makes the horizontal borders.</p>
</div>
<div id="rightbit">
<p>The right</p>
</div>
<div class="topbot"></div>
</div>
<div id="bottombit">
<p>This would be a footer</p>
</div>
</div>
</div>