Solved

div float width

Posted on 2009-05-04
4
472 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

Does Powershell have you tied up in knots?

Managing Active Directory does not always have to be complicated.  If you are spending more time trying instead of doing, then it's time to look at something else. For nearly 20 years, AD admins around the world have used one tool for day-to-day AD management: Hyena. Discover why

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
css, html 5 42
jQuery detect if it is a mobile device 3 196
Capture logon name 13 73
DataTables + iCheck + pagination Issue 2 23
When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…

809 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