CODEWITHSUNDEEP
csscss-float
user2693593
user2693593

Reputation: 9

fill the div with divs in a row (css)

I have div container with fix size 600px. I want to fill with some number of divs (number is dynamic value) in one row.

Something like this:

|---------------------------container-------------------------|
|----box1----||----box2-----||-----box3-----||------box4------|

All boxes must have same size

Upvotes: 1

Views: 5579

Answers (3)

Krasimir
Krasimir

Reputation: 13549

It is actually possible to solve the problem with pure CSS, but it doesn't work in all the browsers. Your questions is kinda duplication of this one. The idea is to set the width of the divs based on their number.

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

/* two items */
li:nth-child(1):nth-last-child(2),
li:nth-child(2):nth-last-child(1) {
    width: 50%;
}

/* three items */
li:nth-child(1):nth-last-child(3),
li:nth-child(2):nth-last-child(2),
li:nth-child(3):nth-last-child(1) {
    width: 33.3333%;
}

Upvotes: 1

AdityaSaxena
AdityaSaxena

Reputation: 2157

Table-layout based answer (pure CSS) : http://jsfiddle.net/QheN7/1/

HTML:

<div class="container">
    <div class="child">&nbsp;</div>
    <div class="child">&nbsp;</div>
    <div class="child">&nbsp;</div>
    <div class="child">&nbsp;</div>
    <div class="child">&nbsp;</div>
    <div class="child">&nbsp;</div>
</div>
<button>Add div</button>

CSS:

.container{
    display:table;
    border:1px solid #000;
    width:600px;
    height:20px;
}

.child{
    display:table-cell;
    height:20px;
}

.child:nth-child(odd){
    background-color:#aaa;
}

.child:nth-child(even){
    background-color:#666;
}

I have used JS only for adding more divs, otherwise it is not needed:

$('button').on('click', function(){
    var newChild = $('.container').find('.child').first();
    newChild.clone().appendTo($('.container'));
});

Upvotes: 6

AdityaSaxena
AdityaSaxena

Reputation: 2157

I'm not sure if this is what you want..You'll need javascript though (I know you didn't tag it here): http://jsfiddle.net/QheN7/

Screen capture:

enter image description here

CSS:

.container{
    overflow:auto;
    border:1px solid #000;
    width:600px;
}

.child{
    float:left;
    height:20px;
}

.child:nth-child(odd){
    background-color:#aaa;
}

.child:nth-child(even){
    background-color:#666;
}

HTML:

<div class="container">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
</div>
<button>Add div</button>

JS:

$(function(){
    function setWidth(){
        var container = $('.container'),
            children = $('.child'),
            containerWidth = container.width(),
            noOfChildren = children.length;
        children.width(containerWidth/noOfChildren);
    }
    $('button').on('click', function(){
        var newChild = $('.container').find('.child').first();
        newChild.clone().appendTo($('.container'));
        setWidth();
    });
    setWidth();
});

Upvotes: 1

Related Questions