CODEWITHSUNDEEP
csswidthparentchildrenexpand
George Adrian Echim
George Adrian Echim

Reputation: 115

Children div to expand to the full width size of the parent div with css on the same row

<style>
.classname {
    min-width:248px;
    height:40px;
    max-width:498px;
    border:1px solid red;
    float:left;     
}
</style>

    <div id="maindiv" style="width:3134px;border:1px solid green;height:90px;">
        <div class="classname">
        </div>
        <div class="classname">
        </div>
        <div class="classname">
        </div>
    </div>

So no matter how many children the maindiv has I whant them to expand to the fullsize of the parent width size. Ex: If maindiv has 1200px width the children to have 400px each if are 3 or 300px if are 4 ONLY CSS SOLUTION

Upvotes: 2

Views: 1209

Answers (3)

harriyott
harriyott

Reputation: 10645

It's a little long-winded, but possible

/* one item */
.classname:first-child:nth-last-child(1) {
    width: 100%;
}

/* two items */
.classname:first-child:nth-last-child(2),
.classname:first-child:nth-last-child(2) ~ .classname {
    width: 50%;
}

/* three items */
.classname:first-child:nth-last-child(3),
.classname:first-child:nth-last-child(3) ~ .classname {
    width: 33.3333%;
}

/* four items */
.classname:first-child:nth-last-child(4),
.classname:first-child:nth-last-child(4) ~ .classname {
    width: 25%;
}

...

You will probably also need 

.classname {
    display: inline-block;
}

See Lea Verou's blog post for more details

Upvotes: 6

Bill
Bill

Reputation: 3517

I don't think this is possible with only CSS.

If you are generating the #maindiv width server-side, you could do some calculating.

example:

<?php
    $width = 3134;
    $children = 4;
    $singlewidth = width/children;
?>
<div class="classname" style="width: <?php echo $singlewidth; ?>px;"></div>

Or, you could possibly use a <table>, depending on what you're trying to do.

Upvotes: 0

drquicksilver
drquicksilver

Reputation: 1635

<DIV>s don't generally run side-by-side; they're block elements. The behaviour you're looking for of multiple elements 'automatically sharing out space' is not an easy one to achieve natively in CSS which is why all the various 'multi-column layout' CSS solutions out there only support a particular set of numbers of columns; for example some of the popular ones support all factors of 12.

The simplest solution to a specific problem like this is to use table cells (or <DIV>s with table-cell layout). However, you'd have to set width=33% or width=25% so you'd have to know how many columns there were. Or use javascript which you indicate you do not want.

Upvotes: 0

Related Questions