Solved

div float width

Posted on 2009-05-04
4
475 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 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:
Britt Thompson 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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
This article discusses four methods for overlaying images in a container on a web page
In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

710 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