div float width

I'm having a case where I'm having two, three or four div's inside a div, all with float left
I'd like the two, three or four divs to fill the main div with.

It's like a table where the widt is 100%, and you add colums.

Any ideas how to to this with divs?

<style type="text/css">
#main {
	width: 350px;
	background-color: #CCC;
.a {
	float: left;
	background-color: #3F9;
<div id="main">
    <div class="a">a</div>
    <div class="a">b</div>
    <!-- <div class="a">c</div> -->

Open in new window

Who is Participating?
Britt ThompsonConnect With a Mentor Sr. Systems EngineerCommented:
A table is probably your best bet. CSS is great but there's still some stuff that tables are better suited for, as ugly as they are in code.

You could most likely render out the CSS in the form you need if you're using PHP and generate the width numbers you need by setting the styles directly in the divs and dynamically generating it with a function. That'd take some time to prepare.
Britt ThompsonSr. Systems EngineerCommented:
You have to add widths to the floated divs. If #main is 350px then, assuming there's no padding or margins, the .a width needs to be 175px. Otherwise, the widths stay dynamic.
kristian_grAuthor Commented:
well, in some cases it will be 175px, oher 100px depending on how many div's I've got at the moment.

Perhaps the correct anser to this is <table width="350px"><tr><td></td><td></td><!--<td></td>--></tr></table>?
David S.Commented:
You could use display:table-cell if you don't need to support IE6-7.
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.