For layout purposes, I would like two containing boxes that are equal Height and Width that are side-by-side. (Think of a 1 row table with 2 columns.)

I would like to avoid using an HTML table, since I don't think it is necessary or appropriate.

My best guess at how to do this would be to...

1.) Create two DIVs2.) Give each a Width3.) Float them to the Left

But if that is a start, then I have some other issues I'm not sure how to handle...

I can't rely on Padding to give them an equal Height because each "box" will have different content

I've always been confused about using Height because I seem to recall Paul O' and others staying it doesn't work like you'd expect it to and is not even honored by all browsers?!

What are your thoughts on all of this?

Thanks,

Debbie

Stomme_poes
—
2011-03-30T14:53:14Z —
#2

I've always been confused about using Height because I seem to recall Paul O' and others staying it doesn't work like you'd expect it to and is not even honored by all browsers?!

Right, well... the rules are more complicated for height than they are for width. And when content enlarges, "height" (rather than min-height) can cause problems with cutting content off.

Setting height in a % is ignored by browsers unless the thing's parent already has a set (non-%) height.

I would like to avoid using an HTML table, since I don't think it is necessary or appropriate.

My best guess at how to do this would be to...

1.) Create two DIVs2.) Give each a Width3.) Float them to the Left

Lessee, there are a few things off the top of my head; they all have drawbacks.

While an HTML table may not be appropriate, there is the CSS equivalent: display: table.I'm not sure if all current browsers who support display: table still need a "table" element, a "row" element and then the "cell" elements, but if they all do (Safari used to need all three for example) then you'd have two wrapping divs rather than one.

Outer-est one would be display: tableinner wrapper would be display: table-rowthe two side-by-sides would be display: table-cell

Because they'll follow the rules like a table, if any one "cell" gets taller, the whole row gets taller. Meaning also the other "cell" div.

IE6 and 7 don't support display: table in any reasonable way. If you need to support them AND it's an absolute MUST that these two boxes are definitely exactly always the same height, you can't use this one.

If the same-height thing is approximate though and you're kinda loose with the restrictions, you can do this (with plain floats, for all browsers):

Find the longest div. If you know what the most amount of content the longest div will have, set a min-height on that div in em's. Use ugly background colours to see that your stated min-height is taller than the content.

Both divs can then have that min-height (and IE6 gets "height"). If content in one of them grows, it won't make the other div grow, but unlike height, it won't stop the div from growing to accomodate the growth of the content.(so this works pretty well in previews where the preview text is limited to x-characters or never goes beyond so-many lines or something... tho it does break the illusion if the user has text-enlarge)

Those two techniques are the first I consider.

Others include doing fancy tricks with absolute positioning and Javascript. I don't like those ones as much : )

PaulOB
—
2011-03-30T16:26:53Z —
#3

Yes Mallory has explained well

This is my preferred method if IE6 and 7 support is required but is a little complicated.

Similar [live example here. (This technique is based and improved form my [URL="http://www.pmob.co.uk/search-this/absolute-columns3-hide.htm"]old article here](http://www.pmob.co.uk/temp/equal-columns-absolute-dec2010.htm).)

Actually, this to accommodate IE6-7 that only gives inline-block to inline elements .. BLAST. however... I was working on a third version of this solution ( tho I cant recall it at the time) double bast!

Rayzur
—
2011-03-31T06:04:28Z —
#6

When dealing with Fixed Widths and BG Colors (not images) it doesn't get much easier than the old Border Trick.

No extra elements (in the markup) needed for that method but it has it's limitations.

One note: the markup doesn't have to look like this one. Using SSI, for example, the initial markup is CC clutter free.

PaulOB
—
2011-03-31T08:35:34Z —
#8

I think we've given Debbie too much to think about

There's loads of good methods above and all will work depending on circumstance and use.

I believe I'm right in saying that the none of the methods mentioned above, as they stand, (apart from mine) will work if you want space between the elements and you want full borders all around each element. However, some of the other methods are simpler to implement than mine so may be better if that function isn't required.

system
—
2011-03-31T10:32:58Z —
#9

I'm at work right now, but I couldn't resist to throw a little demo to challenge what Paul said. :lol:

It needs a little more work to make it consistent, but you get the idea. Anyway, it's just to open a little door for those who like to follow every possible avenue. It's often that a post is more about the forum than about what the OP wants.

Take it like a PoC, don't dwell too much on little details. I'm sure those can easily be tuned down. Also notice that IE8 falls under the less capable browser category now. Also, Op 11 seems to ignore -o-transform.