DIV Tables

[mgieser]

I am trying to use DIV's instead of tables. I want every other cell to have a green background and the others to have a white background.

The problem is that when data on the white cell is larger than that of the other white cell in that row, the smaller one doesn't stretch to meet the height of the other "cell".

Sounds simple but I am finding it isn't.

Here is my HTML and my CSS.

Thanks in advance!



<div class="div-table basicinfo">
<div class="row-no-hover">
<div class="row-data tright">Name</div>
<div class="row-data tleft">asdf asdf</div>

<div class="row-data tright">Address</div>
<div class="row-data tleft"><p>123 easy street</p><p>123 easy street</p></div>
</div>
</div>




@charset "utf-8";
/* CSS Document */

.tright{
text-align: right;
}
.tleft{
text-align: left;
}
.div-table{
width: 100%;
float: left;
border: 1px solid #ccc;
margin: 12px 0;
}
.div-table .row-no-hover{
float: left;
width: 100%;
padding: 0;
margin: 0;
}

.div-table .row-no-hover .row-data{
float: left;
width: 22.88%;
padding: 0 1%;
}
.div-table.basicinfo{
border-top: 0;
border-right: 0;

}
.div-table.basicinfo .row-no-hover{
background: #efefef;
border-top: 1px solid #ccc;
}

.div-table.basicinfo .row-no-hover .row-data.tright{
background: #efefef;
}

.div-table.basicinfo .row-no-hover .row-data.tleft{
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
background: #fff;
height: 100%;
}

[Fang]

It won't stretch unless the heights are given.
A solution is to give the containing div the same background color as the shorter of the 2 child div's.
Most modern browsers support the table display properties, unfortunately IE doesn't.
The data you are using is essentially table data, so you could use a table.

[felgall]

Looks to me like the correct semantic tag to use for that data is <table>

[mgieser]

Well a real table is a likely possibility but the data is all dynamically generated therfore divs are just easier without col and row spans. Thought i'd give you guys all a shout see if anyone knew a trick.

Thanks