1

Let's say I have a parent div with a fixed width of 320px and I want to be able to (or I want my users to be able to) add any amount of child divs to the parent and have them all adjust automatically to share the width of the parent.

I don't want the parent width to change, nor do I want to do this with any sort of scrolling overflow - I just need for the divs inside to fit the width of the parent equally.

For example,

If there is only one child then the width is 100%, if there are two then their width is 50% each etc

How would I go about doing this?

I've approached this many different ways with css, but can't seem to figure it out. I'm assuming this has to be done with some sort of javascript, but I don't know enough to pull it off.

But, If it can be done with just css, that would be great.

Thanks in advance.

(Don't know if you'll need to know this, but the child divs will have no text. They're just blank with background-color and fixed height)

Example code:

CSS

.box {
margin: 10px;
background: white;
border-radius: 6px;
border: 1px solid darken(white, 12%);
-webkit-box-shadow: 0px 1px 4px rgba(50, 50, 50, 0.07);
-moz-box-shadow:    0px 1px 4px rgba(50, 50, 50, 0.07);
box-shadow:         0px 1px 4px rgba(50, 50, 50, 0.07);
float: left;
}

.line {
height: 6px;
opacity: 0.4;
-moz-opacity: 0.4;
filter:alpha(opacity=4);
margin-bottom: -1px;
float: left;
}

HTML

...

<div class="box">
<div class="line">&nbsp;</div>
</div>

...

#will be able to add any amount of .lines
My Head Hurts
  • 37,315
  • 16
  • 75
  • 117
ttyelud
  • 45
  • 1
  • 4
  • 3
    Note that this will become trivial once browsers implement [CSS3 flexbox](http://www.w3.org/TR/css3-flexbox/). – Neil Feb 26 '12 at 21:59

3 Answers3

1

Use display: table (and table-layout: fixed with fixed width for container if you need equal-width columns) for container and display: table-cell for child elements.

Marat Tanalin
  • 13,927
  • 1
  • 36
  • 52
  • This is working well, but it seems that when displaying .line as a table cell there is a min-height (in my case: 15px). I can add `height: 20px` and it works fine, but `height: 6px` does not. – ttyelud Feb 26 '12 at 21:40
  • Don't put any characters (` ` in particular) into your child elements. Then height should be zero. – Marat Tanalin Feb 26 '12 at 22:00
0

Hope this helps!

<html>
<body>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script tye="text/javascript">
function resizeChildren( $div ){
    var $children = $div.children(".child");    // Change .line to the appropriate class of the children
    var $count = $children.length; // Determine how may children
    var $width = $div.width(); // Get width of parent
    var $cellwidth = Math.floor( $width / $count ); // Calculate appropriate child width
    $children.width( $cellwidth ); // Apply width
}

function addChild( $div, $html ){
    $( $html ).prependTo ( $div ); // Add a new child
    resizeChildren ( $div ); // Call the resize function
}

$(document).ready( function(){
    $("#add").click( function(){ // When <a id="add" is clicked...
        addChild( $(".parent"), '<div class="child">Random...</div>' );
        return false;
    });
});
</script>

<style type="text/css">
.parent {
    width: 500px;
    border: 1px solid #000;
}

.child {
    float: left;
}
</style>

<div class="parent" style="width: 500px;">
    <div class="child">Random...</div>
<br clear="all" /></div>
<a href="#" id="add">Add DIV</a>

</body>
</html>
Patrick Moore
  • 13,251
  • 5
  • 38
  • 63
0

Some browsers require also rule font-size:0px to show DIV which height is below 1em, otherwise their height will be 1em.

EDIT

There has came more info while I was writing my answer. If that table lay-out is working, answer to the last comment is above. I removed the part of my answer considering positioning, because I missunderstood your question also.

Teemu
  • 22,918
  • 7
  • 53
  • 106