Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

div float width

Posted on 2009-05-04
4
Medium Priority
?
477 Views
Last Modified: 2012-05-06
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
Comment
Question by:kristian_gr
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
4 Comments
 
LVL 30

Expert Comment

by:Britt Thompson
ID: 24298379
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
 

Author Comment

by:kristian_gr
ID: 24301859
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
 
LVL 43

Expert Comment

by:David S.
ID: 24301983
You could use display:table-cell if you don't need to support IE6-7.
0
 
LVL 30

Accepted Solution

by:
Britt Thompson earned 2000 total points
ID: 24305526
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

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

704 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question