Expanding, Non-Fixed Width, Four Column Layout - html

Question

I have a box that is 950px wide.
Within this box I want to have up to four potential columns.
When all four columns are being utilized each column should take up approximately 25% of the space.
However, when only three are being used I want them to expand to take up 33.33..% or when only two columns are being used I want each to take up 50% and if one is being used I want it to take up 100% of the space.
Because of the dynamic nature that I am trying to achieve I can't use a standard fixed width four column layout.
Bellow is what I have achieved so far. Which results in the columns being stacked on top of each other. As I said, I can't have any fixed width columns as they need to be able to expand and collapse dependent on what is in them.
.bottomboxwrapper {
width:950px;
display:block;
background-color:#6F0;
overflow:hidden;
}
.bottomone {
float:left;
background-color:#CCC;
width:auto;
display:inline-block;
width:auto;
}
.bottomtwo {
float:left;
width:auto;
background-color:#999;
display:inline-block;
width:auto;
}
.bottomthree {
float:left;
background-color:#666;
display:inline-block;
width:auto;
}
.bottomfour {
float:left;
background-color:#C99;
display:inline-block;
width:auto;
}
<div class="bottomboxwrapper">
<div class="bottomone">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam hendrerit odio non diam varius quis mattis libero dignissim. Fusce auctor, turpis eget pretium euismod, tortor nulla eleifend nibh, sit amet blandit justo tellus non enim. Donec sodales ipsum et quam mattis quis tincidunt elit accumsan. Vestibulum dictum lorem ut purus congue vehicula. Quisque et dui non metus fringilla tempor. Fusce at nibh non lorem luctus ultricies sed at eros. Nullam cursus metus in leo tristique adipiscing. Proin volutpat orci eget massa blandit non sodales nulla rutrum. In id augue lacus. Quisque nec neque magna, a hendrerit augue. Suspendisse varius sapien sed neque accumsan volutpat. Sed arcu ligula, sagittis vel elementum vitae, scelerisque eget urna. Proin feugiat turpis at leo accumsan cursus. Nunc commodo, ligula vel posuere mollis, tortor purus blandit sem, id dignissim dui elit ut dolor. Cras tempus porttitor tortor, at hendrerit elit elementum eu. Nam mattis, lectus at bibendum tristique, tellus sapien gravida justo, at malesuada augue nibh nec sapien.
</p>
</div>
<div class="bottomtwo">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam hendrerit odio non diam varius quis mattis libero dignissim. Fusce auctor, turpis eget pretium euismod, tortor nulla eleifend nibh, sit amet blandit justo tellus non enim. Donec sodales ipsum et quam mattis quis tincidunt elit accumsan. Vestibulum dictum lorem ut purus congue vehicula. Quisque et dui non metus fringilla tempor. Fusce at nibh non lorem luctus ultricies sed at eros. Nullam cursus metus in leo tristique adipiscing. Proin volutpat orci eget massa blandit non sodales nulla rutrum. In id augue lacus. Quisque nec neque magna, a hendrerit augue. Suspendisse varius sapien sed neque accumsan volutpat. Sed arcu ligula, sagittis vel elementum vitae, scelerisque eget urna. Proin feugiat turpis at leo accumsan cursus. Nunc commodo, ligula vel posuere mollis, tortor purus blandit sem, id dignissim dui elit ut dolor. Cras tempus porttitor tortor, at hendrerit elit elementum eu. Nam mattis, lectus at bibendum tristique, tellus sapien gravida justo, at malesuada augue nibh nec sapien.
</p>
</div>
<div class="bottomthree">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam hendrerit odio non diam varius quis mattis libero dignissim. Fusce auctor, turpis eget pretium euismod, tortor nulla eleifend nibh, sit amet blandit justo tellus non enim. Donec sodales ipsum et quam mattis quis tincidunt elit accumsan. Vestibulum dictum lorem ut purus congue vehicula. Quisque et dui non metus fringilla tempor. Fusce at nibh non lorem luctus ultricies sed at eros. Nullam cursus metus in leo tristique adipiscing. Proin volutpat orci eget massa blandit non sodales nulla rutrum. In id augue lacus. Quisque nec neque magna, a hendrerit augue. Suspendisse varius sapien sed neque accumsan volutpat. Sed arcu ligula, sagittis vel elementum vitae, scelerisque eget urna. Proin feugiat turpis at leo accumsan cursus. Nunc commodo, ligula vel posuere mollis, tortor purus blandit sem, id dignissim dui elit ut dolor. Cras tempus porttitor tortor, at hendrerit elit elementum eu. Nam mattis, lectus at bibendum tristique, tellus sapien gravida justo, at malesuada augue nibh nec sapien.
</p>
</div>
<div class="bottomfour">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam hendrerit odio non diam varius quis mattis libero dignissim. Fusce auctor, turpis eget pretium euismod, tortor nulla eleifend nibh, sit amet blandit justo tellus non enim. Donec sodales ipsum et quam mattis quis tincidunt elit accumsan. Vestibulum dictum lorem ut purus congue vehicula. Quisque et dui non metus fringilla tempor. Fusce at nibh non lorem luctus ultricies sed at eros. Nullam cursus metus in leo tristique adipiscing. Proin volutpat orci eget massa blandit non sodales nulla rutrum. In id augue lacus. Quisque nec neque magna, a hendrerit augue. Suspendisse varius sapien sed neque accumsan volutpat. Sed arcu ligula, sagittis vel elementum vitae, scelerisque eget urna. Proin feugiat turpis at leo accumsan cursus. Nunc commodo, ligula vel posuere mollis, tortor purus blandit sem, id dignissim dui elit ut dolor. Cras tempus porttitor tortor, at hendrerit elit elementum eu. Nam mattis, lectus at bibendum tristique, tellus sapien gravida justo, at malesuada augue nibh nec sapien.
</p>
</div>
</div>

Answer 1

The easiest way to do this with CSS is to use display: table/display: table-cell. Adding table-layout: fixed ensures equal width columns.
Here's an example with your HTML: http://jsfiddle.net/thirtydot/N4BUh/ (or fullscreen)
.bottomboxwrapper {
display: table;
table-layout: fixed;
width: 100%;
}
.bottomboxwrapper > div {
display: table-cell;
}
The only downside of this technique is that display: table is not supported in IE7.
There's a JavaScript polyfill available that fixes IE7: http://tanalin.com/en/projects/display-table-htc/

Answer 2

I think the most you could do with CSS only would be to nest the columns in something like this.
.one .col {
width:100%;
}
.two .col {
width:50%;
}
.three .col {
width:33.33%;
}
.four .col {
width:25%;
}
The drawback to that is you would have to know ahead of time how many columns you want and call the class name (or number) in the HTML like so...but at least you would only change a single class, "one", "two", etc.
<div class="two">
<div class="col">50% wide</div>
<div class="col">50% wide</div>
</div>
<div class="three">
<div class="col">33.33% wide</div>
<div class="col">33.33% wide</div>
<div class="col">33.33% wide</div>
</div>