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

Question

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

Layout

DUPLICATE http://stackoverflow.com/questions/90178/make-a-div-fill-the-remaining-screen-space?rq=1 — DevlshOne, Aug 11 '13 at 13:40
@Zim3r Yes, it absolutely is. If you read that post you will find the answer to your question. — DevlshOne, Aug 11 '13 at 13:44
@Ali.NET Please take a look at the picture, I want section one to become something like section two. — Zim3r, Aug 11 '13 at 13:45
@DevlshOne It says: Make a div fill the remaining screen space I don't want to do that! I want divs to be near each other. — Zim3r, Aug 11 '13 at 13:46

Josh · Accepted Answer · 2013-08-11T13:57:48.677

2

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/

edited Aug 11 '13 at 13:57

answered Aug 11 '13 at 13:52

Josh

2,835
1
21
33

score 1 · Answer 2 · answered Aug 11 '13 at 14:02

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/

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

2 Answers2