CSS - automatic div width

Question

I have an html structure that can vary depending on the context of the page. On some pages it looks like this:

<div class="container"> <div class="column"> blah </div> </div> 

And on others:

 <div class="container"> <div class="column"> blah </div> <div class="column"> blah </div> </div> 

Thus, the container has a liquid width (100%).

div .column also a fluid and should have the width of its container in the first example, i.e. 100%, and in the second example - 50% of the width and left aligned.

Like:

 ---------------------------- | | | column1 | | | ----------------------------- 

and

 ---------------------------- | | | | column2 | column2 | | | | ----------------------------- 

How can i do this?

I should also note that I cannot change the markup in column1 / column2 (I cannot add classes or something like that, perhaps only using javascript hacks or capturing php output and using regex :)

Answer 1

I can think of two solutions.

• Use the CSS3 frame panel .
• Set the columns to display: table-cell; in columns and display: table-row; in the container.

Answer 2

The best I can come up with is JavaScript: http://jsfiddle.net/V5Au7/ .

Some pretty annoying errors:

• This assumes that the only divs in #container are those that have the class name "column".
• This assumes the columns do not have borders, indents, or margins.
• You may run into problems with subpixels based on percentages. Of course, this probably won't be a problem if you stick with one or two columns.

There should be CSS — the only way that can also work in IE6. I feel it, I just can't find it.