Mimicing table rows with min-width and min-height?

[Tinister]

What I'm trying to do is build what looks very much like a table, but tables are not ideal for several reasons. However I'll be explaining what I'm trying to do using table terminology because I believe that would be easiest to convey my thoughts.

- Each "row" needs to be contained in its own div, and this div can either be absolutely positioned or not positioned (i.e. 'position: static').

- The row will have two "cells" (potentially could increase).

- I want to set min-widths to the entire row and to the first cell (second cell's width being the difference). The actual widths don't need to be consistent with neighboring rows (each row and cell can grow wider independently of other rows, in other words).

Up to this point, it's fairly easy to do with floating divs for the "cells". What's tricky, however, is that I also want the height of the row to grow if the content demands for it. Especially having both cells grow taller if only one cell has overflowing content.

Now I've tried actually putting a one-row table into each containing div, but fixing a (min-)width/(min-)height to the table and/or first td only isn't being very cooperative.

I would really like to be able to do this with pure CSS but I'm running of ideas. Help would be appreciated.

Note about browsers: In the long run I would like this to be cross-browser compatible, but as of now just getting it to work in any browser would be great, and I'm doing most of my development with Firefox right now.

[sobrien79]

Try this. Borders and background colors are for you to be able to see what they are doing. The key to showing a full border is that the borders overlap. Since they overlap, the right cell's shorter border is not seen. Same would go for if the right cell was taller. The left cell's border would be shorter but you wouldn't be able to tell since they overlap.

Styles:

.row {
	border: 1px solid #000000;
	clear: both;
	overflow: auto;
	position: relative;
}
.cell {
	float: left;
}
.first {
	background-color: #CCCCFF;
	border-right: 1px solid #000000;
	height: 200px;
	width: 300px;
}
.second {
	background-color: #CCFFCC;
	border-left: 1px solid #000000;
	height: 100px;
	left: -1px;
	position: relative;
}

HTML:

<div class="row">
	<div class="cell first">First</div>
	<div class="cell second">Second Second Second Second Second</div>
</div>

[Tinister]

Hey sobrein79,

Thanks a lot! I think we're almost there. After playing around with it for a bit here's what I got:

Styles:

.row
{
	min-width: 600px;
	min-height: 25px;
	border: solid 1px #000000;
	margin-bottom: 10px;
	overflow: hidden; /*I'd prefer it not to scroll, this appears to do the same effect as 'overflow: auto;'*/
	background-color: #e0e0e0; /*Matches '.first'*/
}

.cell
{
	float: left;
	min-height: 15px;
	padding: 5px;
	white-space: nowrap;
}

.first
{
	min-width: 89px;
	border-right: solid 1px #000000;
	background-color: #e0e0e0;
}

.second
{
	position: relative;
	left: -1px;
	min-width: 489px;
	border-left: solid 1px #000000;
	background-color: #ffffff;
}

HTML:

<div class="row">
	<div class="cell first">First</div>
	<div class="cell second">Second<br/>Second<br/>Second<br/>Second<br/>Second</div>
</div>

Some issues with this are:
1) If div.first were to become taller than div.second, the area underneath div.second would be gray. I think this is okay, though, since I don't expect div.first to ever be the taller one.
2) div.row still takes up as much width as it can, in spite of the 'min-width' attribute. =( I can fix this by adding 'position:absolute;' to div.row's style, but this is not ideal either since multiple div.row elements would appear on top of each other.

[sobrien79]

To fix the IE6 issues that will come up make the changes below. I just threw what I put earlier and looked at it in FF without looking in IE6.

Add

.clear {
	clear: both;
}

And the cleared div.

<div class="row">
	<div class="cell first">First</div>
	<div class="cell second">Second<br/>Second<br/>Second<br/>Second<br/>Second</div>
	<div class="clear"></div>
</div>

[sobrien79]

Here, try this on for size.

The .row float: left will shrink wrap the rows, but the clear: both; will make sure that the rows don't flow next to each other. This looks identical in IE6, IE7, and FF.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Test</title>
	<style type="text/css">
	.row {
		clear: both;
		float: left;
		min-width: 600px;
		min-height: 25px;
		border: solid 1px #000000;
		margin-bottom: 10px;
		background-color: #e0e0e0;
	}
	.cell {
		float: left;
		min-height: 15px;
		padding: 5px;
		white-space: nowrap;
	}

	.first {
		min-width: 89px;
		border-right: solid 1px #000000;
		background-color: #e0e0e0;
	}

	.second {
		position: relative;
		left: -1px;
		min-width: 489px;
		border-left: solid 1px #000000;
		background-color: #ffffff;
	}
	</style>
	<!--[if lt IE 7]>
	<style type="text/css">
	.row {
		width: 600px;
	}
	.first {
		width: 89px;
	}
	.second {
		width: 489px;
	}
	</style>
	<![endif]-->
</head>
<body>
<div class="row">
	<div class="cell first">First</div>
	<div class="cell second">Second<br/>Second<br/>Second<br/>Second<br/>Second</div>
</div>

<div class="row">
	<div class="cell first">First</div>
	<div class="cell second">Second<br/>Second<br/>Second<br/>Second<br/>Second</div>
</div>

<div class="row">
	<div class="cell first">First</div>
	<div class="cell second">Second<br/>Second<br/>Second<br/>Second<br/>Second</div>
</div>

<div class="row">
	<div class="cell first">First</div>
	<div class="cell second">Second<br/>Second<br/>Second<br/>Second<br/>Second</div>
</div>
</body>
</html>

[Tinister]

That'll work, thanks! =D