trouble building table with DIVs

[bukwus]

HelloI'm playing around with a way to build tables that are styled consistently throughout the site, but whose dimensions will be different from page to page. I'm sure there are better ways to do it, just the same I'd like to figure out a couple problems I've run into.In IE what I've done so far looks fine, but in Firefox the DIVs that have nested DIVs inside them are not stretching height-wise to the dimensions of the nested DIVs. In other words they are all compressed at the top of the table which can be seen because of their borders.Also, in both browsers, the background color of the last cell in the top row does not stretch all the way to the right.Check out this link in IE and Firefox for an example:http://www.bdki.com/buzg8.org/nh/ch_sharebuilder.phpHere is the code:

<!-- TABLE -->	<div>		<div class="row">			<div class="cell sBuild head width1">cell</div>							<div class="cell sBuild head width2">cell</div>						<div class="cell sBuild head last width3">cell</div>		</div>				<div class="row">			<div class="cell sBuild body width1">cell</div>							<div class="cell sBuild body width2">cell</div>						<div class="cell sBuild body last width3">cell</div>		</div>				<div class="row">			<div class="cell sBuild body width1">cell</div>							<div class="cell sBuild body width2">cell</div>						<div class="cell sBuild body last width3">cell</div>		</div>				<div class="row last">			<div class="cell sBuild body width1">cell</div>							<div class="cell sBuild body width2">cell</div>						<div class="cell sBuild body last width3">cell</div>		</div>	</div><!-- END TABLE -->

Here are the styles:

DIV {  font-family:verdana,helvetica,arial;  font-size:11px;  line-height:13pt;  font-weight:normal;  color:#000000;  background-color:transparent;  margin:0px;  padding:0px;  margin-top:10px;}.row {	border-style:solid;	border-width:1px;	border-color:gray;	border-bottom:none;	padding:0px;	margin:0px;	width:97%;}.row.last {	border-bottom:solid 1px gray;}.cell {	padding:0px;	margin:0px;	border-right:solid 1px gray;	padding:3px;	margin:0px;	float:left;}.cell.last {	border-right:none;}.cell.head {	text-transform:uppercase;	background-color:#C0C0C0;	font-weight:bold;}.sBuild.body {	min-height:150px;}.sBuild.width1 {	width:17%;}.sBuild.width2 {	width:55%;}.sBuild.width3 {	width:26%;}

[hybridgoomba]

it might be easier if you just use tables for this instead of divs.

[Synook]

Yes, the main reason why you don't use tables is because they are slow to load, but as your code is it would be quicker just to use tables Tables are fine for data, and they have their uses.

[bukwus]

Thanks guys

Yes, the main reason why you don't use tables is because they are slow to load, but as your code is it would be quicker just to use tables Tables are fine for data, and they have their uses.