Need two column boxes that are the same size

Hello,

I am trying to set up a two column section in the main section of my site. Each box has a different amount of text. I would like to get all boxes to have the same width and height, even when resized.

The page can be found at http://students.depaul.edu/~sakel/Trading_Tools.htm

As you can see, the boxes don't match up in width and height, nor do they stay the same size when resizing the browser window. For the actual content boxes, I used a method that does not use images. I tried wrapping the boxes in a 100% width table and having each <td> have a 50% (or less) width each.

Below is the CSS used for the content boxes. Any help would be appreciated. The problem may be as simple as altering the tables. I doubt it has anything to do with the CSS for the boxes, as they work just fine when having a one column layout.

/* Rounded Boxes for About Us Page - Blue */

.b1h, .b2h, .b3h, .b4h, .b2bh, .b3bh, .b4bh{font-size:1px; overflow:hidden; display:block;}
.b1h {height:1px; background:#aaa; margin:0 5px;}
.b2h, .b2bh {height:1px; background:#fff; border-right:2px solid #aaa; border-left:2px solid #aaa; margin:0 3px;}
.b3h, .b3bh {height:1px; background:#fff; border-right:1px solid #aaa; border-left:1px solid #aaa; margin:0 2px;}
.b4h, .b4bh {height:2px; background:#fff; border-right:1px solid #aaa; border-left:1px solid #aaa; margin:0 1px;}
.b2bh, .b3bh, .b4bh {background: #325C74;}
.headh {background: #fff; border-right:1px solid #aaa; border-left:1px solid #aaa;}
.headh h3 {margin: 0px 10px 0px 10px; padding-bottom: 3px;}
.contenth {background: #236B8E; color: #fff; font-size: 0.7em; line-height: 1.7em; font-family: Verdana, Arial; border-right:1px solid #aaa; border-left:1px solid #aaa; padding-left: 10px; padding-right: 12px; padding-top: 8px;}
.contenth div {padding-left: 2px; padding-right: 2px; padding-top: 2px;}

try this

.contenth {background: #236B8E; color: #fff; font-size: 0.7em; line-height: 1.7em; font-family: Verdana, Arial; border-right:1px solid #aaa; border-left:1px solid #aaa; padding-left: 10px; padding-right: 12px; padding-top: 8px; min-height:100px;}
Then on this html take off the margin-top to make them look aligned


<div style="margin-top: 30px;" class="boxcontainer">

<b class="b1h"/>
<b class="b2h"/>
<b class="b3h"/>
<b class="b4h"/>
<div class="headh">
<h3 class="platform">
E-Calendar
</h3>
</div>

<div class="divider"/>
<div style="background-color: rgb(240, 248, 255); color: rgb(0, 0, 0);" class="contenth">
Get the latest futures information with our Electronic Futures Calendar.<div class="boxlink"><a class="boxlink_alt" target="_blank" href="#">Click to learn more</a></div>
</div>

That one line fixed it right up for both IE and FF. It always seems like my layout issues have to do with leaving out min-height.

Thanks jc!

Hello again,

I previously tested in IE 7 and FF2 and the site was fine, but I am now having display problems for this on IE 6. Below is a link for the screenshot when viewed in IE6 (used browsershots.org since I don't have IE 6 installed).

http://students.depaul.edu/~sakel/screenshot.png

Website: http://students.depaul.edu/~sakel/Trading_Tools.htm

The E-Calendar box is not the same size as all the others. Also, the second row of boxes no longer has the padding and is too close to the footer. And finally, there is a gap between the tiled image I used and the right content area.

This is the CSS that pertains to the header image and the repeated image:

.tradingtoolsbg
{
background: url(tradingtoolsbg.jpg);
background-repeat: repeat-x;
width: 100%;
}

.bg
{
background: url(researchbg.jpg);
background-repeat: repeat-x;
width: 100%;
}

Again, any help would be greatly appreciated. Thanks!

Try JavaScript. This works like a charm, and I have tested it across multiple browsers.

Don't use tables for this, as they are now depreciated HTML. Use two divs, and use CSS to place them next eachother. Set each div with the class="equal".

Place this JavaScript in your head section.


matchColumns=function(){
var divs,contDivs,maxHeight,divHeight,d;
divs=document.getElementsByTagName('div');
contDivs=[];
maxHeight=0;
for(var i=0;i<divs.length;i++){
// make collection with <div> elements with class attribute "equal"
if(/\bequal\b/.test(divs[i].className)){
d=divs[i];
contDivs[contDivs.length]=d;
if(d.offsetHeight){
divHeight=d.offsetHeight;
}
else if(d.style.pixelHeight){
divHeight=d.style.pixelHeight;
}
maxHeight=Math.max(maxHeight,divHeight);
}
}
for(var i=0;i<contDivs.length;i++){
contDivs[i].style.height=maxHeight + "px";
}
}
window.onload=function(){
if(document.getElementsByTagName){
matchColumns();
}
}

For this particular site, the client would like to stay away from Javascript. Is there another way to get these to display properly? Tables are fine for this, since I use them sparingly.

If there is an IE 6 fix for this, that would be great. Or maybe another way to fix it using CSS...

here is the IE6 hack for min-height

selector {/*this is the name of your class or id*/
min-height:500px;/*you can change this to whatever you need on both*/
height:auto !important;
height:500px;
}

_______________________

as far as the back ground for the header dont use 100% for an image, it will only show the 100% of the size not the actual div

.tradingtoolsbg
{
background: url(tradingtoolsbg.jpg);
background-repeat: repeat-x;
width: 100%;
}

.bg
{
background: url(researchbg.jpg);
background-repeat: repeat-x;
width: 100%;
}



i suppose you will just need to add padding to the top of your footer, not sure why it got lost