Solved

div float width

Posted on 2009-05-04
4
471 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
  • 2
4 Comments
 
LVL 30

Expert Comment

by:renazonse
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 42

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:
renazonse earned 500 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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Suggested Solutions

Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…

760 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

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now