CODEWITHSUNDEEP
jquerycsshtml
Zim3r
Zim3r

Reputation: 608

Place divs beside each other in a layout to fill free space

According to the picture I can place divs beside each other using float but how can I make them fill the free space?

Layout

Upvotes: 0

Views: 108

Answers (2)

Joe
Joe

Reputation: 8292

You make a container for each column and just float them all.

(I added a class of small and big for size differences.)

<div id="a">
    <div class="box small">
    </div>
    <div class="box big">
    </div>
    <div class="box small">
    </div>
    <div class="box big">
    </div>
</div>
<div id="b">
    <div class="box big">
    </div>
    <div class="box small">
    </div>
    <div class="box big">
    </div>
    <div class="box small">
    </div>
</div>
<div id="c">
    <div class="box small">
    </div>
    <div class="box big">
    </div>
    <div class="box small">
    </div>
    <div class="box big">
    </div>
</div>

The css behind this:

#a,#b,#c {
    width:50px;
    height:auto;
    float:left;
    margin:10px;
}

.box {
    float:left;
    width:50px;
    margin:5px;
    background-color:#ccc;
}

Check it in action here: http://jsfiddle.net/pvKhQ/

Upvotes: 1

Josh
Josh

Reputation: 2895

You need to use containers for each div e.g:

<div class="container">
    <div class="box"></div>
    <div class="box"></div>
</div>
<div class="container">
    <div class="box"></div>
    <div class="box"></div>
</div>
<div class="container">
    <div class="box" id="big"></div>
    <div class="box"></div>
</div>

Demo: http://jsfiddle.net/Jt3Az/3/

Upvotes: 2

Related Questions