CODEWITHSUNDEEP
javascriptcsshtmlresize
ttyelud
ttyelud

Reputation: 45

Auto resize child divs so they equally share width of parent

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

Upvotes: 1

Views: 4698

Answers (3)

Teemu
Teemu

Reputation: 23396

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.

Upvotes: 0

Patrick Moore
Patrick Moore

Reputation: 13344

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>

Upvotes: 0

Marat Tanalin
Marat Tanalin

Reputation: 14123

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.

Upvotes: 1

Related Questions