2 div's, both should stretch

Why is this so darn hard?

[designaweb]

I'm trying... really... I am very tempted to revert back to a simple <table> structure... But I wont, I can't, I *must* prevail.... *sigh*....

Who can convert this into a <div> structure:

<table>
<tr>
<td>
cell A1
</td>
<td>
cell A2
</td>
</tr>
<tr>
<td>
cell B1
</td>
<td>
cell B2
</td>
</tr>
</table>

The thing is... I dont know the contents of either one of these cells. Sometimes A1 holds more lines then A2, and B2 might hold more lines then B1 and vice versa... The height of A1 should be the same as A2, and B1.height = B2.height...

[coopersita]

How about:

<div>a1</div><div>a2</div>
<div>b1</div><div>b2</div>

css:

div {width: 49%; float: left;}

[saucey]

That works fine until a1's cell has more content than a2's, at which point b2 floats next to a1 and beneath a2, leaving b2 to float beneath all that mess (did you follow that? it makes my head hurt when i read it back).

I'm sure there is some guru out there who has an answer for this, but I've found that when you get into this kind of situation, where you don't know Exactly what data is going to be propigating your 'cells', then tables are the way to go.

I know I'm going out on a limb here, as I'm new to this forum and I'm probably saying something that is 'bad'... but W3 does have this to say about Tables:

"The HTML table model allows authors to arrange data -- text, preformatted text, images, links, forms, form fields, other tables, etc. -- into rows and columns of cells."

There are times where I was just spending SO much time trying to change a table into a div, even though displaying data is what a table is Suppose to do, that it wasn't cost effective.

:) Just my two cents...

[pixel_juice]

As long as you know how wide and high you want the section to be:

#container {
width:20%;
}
.right {
float:right;
}
.one, .two {
height:20%;
}

<div id=container>
<div class="right one">cell B1</div><div class="one">cell A1 </div>
<div class="right two">cell B2</div><div class="two">cell A2</div>
<div>

Any use?

[coopersita]

if b1 jumps below a2, then you need to add some more divs to stabalize it:

<div class="row">
<div>a1</div><div>a2</div>
</div>
<div class="row">
<div>b1</div><div>b2</div>
</div>

.row {clear:both; }
.row div {float: left; width:49%;}

[DrDoc]

What's wrong with using tables?

[coopersita]

I guess it depends on the content... tabular data in tables is in my opinion a-ok.

[DrDoc]

And, since the content in this case in unknown ... I'd say -- stick with tables. :) Saves you a lot of headache, while it is as far as anyone knows still semantically correct.

[doodlebee]

How about...

<div class="container">
<div class="left">
A-1 stuff here
</div>
</div class="right">
A-2 stuff here
</div>
<hr />
</div> <-- closing container div
<div class="container">
<div class="left">
B-1 stuff here
</div>
</div class="right">
B-2 stuff here
</div>
<hr />
</div> <-- closing container div

The css:

.container {
width:700px;
}
.left {
width:350px;
float:left;
}
.right {
width:350px;
float:right;
}
hr {
clear:both;
visibility:hidden;
}

Basically, you're sticking the A-1 and A-2 divs side-by side within a container themselves. Whichever container has the most content will stretch the outer continer div fully. Then it will close, and another will begin with your B-1 and B-2 content in the same manner. (Hope that makes sense!)

You might have to play with the math there to get it right (especially for IE), but it should function just fine, for th emost part. Enough to get your started anyway :)