Forum Moderators: not2easy
I've got three boxes which are displayed next to each other. Each one has a width of 31%. They've got similar amounts of text so in my screen (1024 x 800) they're all the same height.
When I adjust the screen and they become narrower, their height increases at different rates so that they're all different heights.
Is there anyway to make sure that they're always going to be the same height?
Here's the code:
<html>
<head>
<style>
.boxes {width:31%}
#box1 {float:left}
#box2 {float:left; margin:0 3%}
#box3 {float:left}
.boxheader {background: #26a url(tabnow_open.jpg) top left no-repeat}
.boxheader div {background: url(tabnow_close.jpg) top right no-repeat}
.boxcontent {border:2px #26a solid}
.boxes h2 {color:#fb0; font-size:1.1em; margin:0; padding:2px 14px; text-align:center; background:none; border:0}
.boxes h2 a:link, .boxes h2 a:visited, .boxes h2 a:hover, .boxes h2 a:active {color:#fb0; text-decoration:none}
.boxes p {padding:5px; margin:0}
</style>
</head>
<body>
<div class="boxes" id="box1">
<div class="boxheader"><div>
<h2><a href="#">Header</a></h2>
</div></div>
<div class="boxcontent">
<p>Text will go here, lots and lots of text. Then even more text will go here.</p>
<p>Text will go here, lots and lots of text. Then even more text will go here.</p>
</div></div>
<div class="boxes" id="box2">
<div class="boxheader"><div>
<h2><a href="#">Header</a></h2>
</div></div>
<div class="boxcontent">
<p>Text will go here, lots and lots of text. Then even more text will go here. And then more.</p>
<p>Text will go here, lots and lots of text. Then even more text will go here. And then more.</p>
</div></div>
<div class="boxes" id="box3">
<div class="boxheader"><div>
<h2><a href="#">Header</a></h2>
</div></div>
<div class="boxcontent">
<p>Text will go here, lots and lots of text. Then even more text will go here. And then some more.</p>
<p>Text will go here, lots and lots of text. Then even more text will go here. And then some more.</p>
</div></div>
</body>
</html>
I think this can now be done with absolute positioning, but it doesn't work well in IE so unless you can set a container height (the workaround for IE) I think that the solution here would be a three celled table.. then the divs don't have to float and you can set the table borders to simulate the boxes you have..
and in this case the code needn't be any more bloated than the existing div set up and it can still be controlled from the CSS file
<html>
<head>
<style>table.boxes {
width: 100%;
padding: 0;
margin: 0;
}table.boxes td {padding: 0;
border-width: 2px; /* I wasn't sure if you require top border here but just amend to suit */
border-color: #26a;
border-style: solid;
vertical-align: top;
width: 33%;0
background: #fff;
color: #000;
}table.boxes td h2 {
background: #26a url(tabnow_close.jpg) top right no-repeat;
color:#fb0;
font-size:1.1em;
margin:0;
padding: 2px 14px;
text-align:center;
}
table.boxes td h2 span {background: transparent url(tabnow_open.jpg) top left no-repeat;}table.boxes td h2 a {color:#fb0; text-decoration:none}
table.boxes td p {padding:5px; margin:0}
</style>
</head><body>
<table class="boxes" cellspacing="15">
<tr>
<td>
<h2><span><a href="#">Header</a></span></h2>
<p>Text will go here, lots and lots of text. Then even more text will go here.</p>
<p>Text will go here, lots and lots of text. Then even more text will go here.</p>
</td><td>
<h2><span><a href="#">Header</a></span></h2>
<p>Text will go here, lots and lots of text. Then even more text will go here. And then more.</p>
<p>Text will go here, lots and lots of text. Then even more text will go here. And then more.</p>
</td><td>
<h2><span><a href="#">Header</a></span></h2>
<p>Text will go here, lots and lots of text. Then even more text will go here. And then some more.</p>
<p>Text will go here, lots and lots of text. Then even more text will go here. And then some more.</p>
</td>
</tr>
</table>
</body>
</html>
I removed all divs as they weren't necessary (the class on the table does the work then specificity can take care of the rest) and the only place you may need something is to get your 2 x graphics on the header so I added it in using a span.. although you could possibly use the <a>nchor element too.. but without seeing your images, I don't exactly know which solution is best .. also just increase the top padding on <h2> if you want that to be taller...
the border setting on the cell is written long-hand for clarity as I wasn't sure if you want a top border with your graphics an all ;)
as it's just a small table, I don't think there would be any compromise to using this method and then if you need another "row" I would use another entire table rather than just adding a row to allow each table's rendering time to remain as fast as possible.
Suzy
