Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 478
  • Last Modified:

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;
}
-->
</style>
</head>
<body>
<div id="main">
    <div class="a">a</div>
    <div class="a">b</div>
    <!-- <div class="a">c</div> -->
</div>

Open in new window

0
kristian_gr
Asked:
kristian_gr
  • 2
1 Solution
 
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.
0
 
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>?
0
 
David S.Commented:
You could use display:table-cell if you don't need to support IE6-7.
0
 
Britt ThompsonSr. 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.
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now