heh, sorry for the drama ^_^

I just took on a new project, and I've decided to fight tooth n' nail against using ANY tables whatsoever. I've been nursing that bad habit for far, far too long. So anyway, I'm humbled before you guys, admitting my relative n00bness to display:block & float:whatever. Please be gentle.

I'm aiming to emulate a 2 cell table. Cake, right?

.box1 {
display: block;
float: left;
}

.box2 {
display: block;
float: left;
}

Then, I need another block underneath those 2 (equivalent to a 2nd row, colspan=2). Following the same concept as before, this works just dandy in IE (that's a first), but Mozilla sticks the 3rd block inline with the 2nd. I've been tweaking around with nowraps, positioning, etc., and I've googled various strings for the past hour - but no dice.

Any help is VERY appreciated. And while I've got your attention, any advice on whether I should be using div's or spans for this?

You could try this, it works with firefox and ie7 at least:

.box1, .box2 {
display: block;
float: left;
border: 1px solid;
height: 100px;
margin: 2px;
}

.box1 {
width: 200px;
}

.box2 {
clear:left;
width: 406px;
}

and the html:

<div class="box1"></div><div class="box1"></div>
<div class="box2"></div>

Note that the width of the "box2" is 6px wider than the sum of the two "box ones". Two of those pxs come from the border widths (two left and right borders add up to 4px, whereas the bottom div only has one left and one right hand side border), and the rest comes from the margins.

Also, I'd like to add that tables are still very much useful in displaying tabular data. It's not absolutely necessary to discard them altogether.

is this what you mean:

box1 | box2
--------------
box3

you can try this if that is what you mean:

<div id="wrapper">
<div id="box1">box1</div>
<div id="box2">box2</div>
<div id="box3">box3</div>
</div>

#wrapper{
margin:0 auto;
padding:0;
width:200px;
}

#box1{
width:150px;
background-color:#333333;
float:left;
color:#CCCCCC;
}

#box2{
width:50px;
background-color:#0066CC;
float:left
}

#box3{
clear:both;
background-color:#00FF99;
}

My husband and I were having that very discussion last night, regarding my decision to extinguish tables altogether. He was basically saying the same thing; that tables are a useful tool ... and by throwing out that tool, I'm just limiting my options.

All things considered (and after much pouting), I've decided it's best to use a table again. This is a client's ecommerce site, not an appropriate place to experiment IMHO. I did, however, try the methods listed above (THANK YOU!). You guys rock, this is definitely *the* place to be.

"He was basically saying the same thing; that tables are a useful tool ... and by throwing out that tool, I'm just limiting my options."

There really is nothing wrong with tables. Tables are a useful tool, for presenting tabular data. If you are including a data grid, by all means a table is the right tool. The point of xhtml/css is not to depreciate the table tag, because it is a perfectly valid tool for any developer to use. The true intent of all the development done in pure css layouts is to remove the reliance on complex use of tables for layout. Table is not the right tool for that, and should never be used in that way.

My method is working very well, it's what I use and require only a BR class, so maybe you should try it, other way are good too, but a little bit more complicated for nothing ;)

It's cool to see all the various approaches to float/clear. I was struggling with this and nifkin pointed out the proper way to use the PiE method for another kind of float. Do any of you guys use it to ensure cross-browser consistency? Does anyone even care about IE-and-Mac support anymore?

I don't see the point in having the line-break when all you have to do is set 'clear: left;' for the first column in the row, or simply clear the next element below it.

Agreed, though til recently I was making the same mistake. Hawke, instead of using a break tag, couldn't you just apply the class="clear" to div3?

Dan Cederholm also gives an interesting method in his bulletproof web design book chaper 4 creative floats using definition lists

http://www.amazon.com/gp/product/0321346939/sr=8-1/qid=1153427423/ref=pd_bbs_1/103-9465093-7978222?ie=UTF8

I think I was just confused about the goal here. I thought he was trying to emulate a table without using tables. That's what I focused my code on.

Sorry for the mixup.