How to make arrange div containers in CSS?

Question

So I have several div containers for my website, and they stack vertically as follows: How my website looks right now and I want it to look more like this: How I want my website to look My HTML looks like this:

<div id="main">
            <div id="header">
            </div>
            <div id="content">
                <div id="game" class="box">
                    <canvas data-processing-sources="hello-web.pde"></canvas>
                </div>
                <div id="desc_down"> <!-- Description and Downloads -->
                    <div id="desc" class="box"> <!-- Description -->

                    </div>
                    <div id="down"> <!-- Downloads -->
                        <div id="windows" class="box">
                        </div>
                        <div id="mac" class="box">
                        </div>
                        <div id="linux" class="box">
                        </div>
                        <div id="code" class="box">
                        </div>
                        <div id="info" class="box">
                        </div>
                    </div>
                </div>
                <div id="screenshots" class="box">

                </div>
                <div id="tech_about">
                    <div id="tech" class="box">

                    </div>
                    <div id="about" class="box">

                    </div>
                </div>
            </div>
        </div>
    <div>

and my CSS like this:

#main {
    max-width: 1280px;
    width: 90%;
    margin: 0 auto;
    background-color: #b0e0e6; /* all colours temp */
}

#header, #content, #game, #desc_down, #screenshots, #tech_about, #info {
    width: 100%;
}
#desc {
    width: 60%;
}
#down {
    width: 40%;
}
#windows, #mac, #linux, #code {
    width: 50%;
}
#about {
    width: 45%;
}
#tech {
    width: 50%;
}
.box {
    background-color: #FFFFFF;
    border: 5px solid;
    border-color: #000000;
    height: 200px;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}

The heights of these boxes can and will change. I want to know how to make my website look like how want it to. Thank you.

Have you considered using the [grid layout from Twitter bootstrap](http://getbootstrap.com/css/#grid)? — Richard Ev, Jun 22 '14 at 15:44
You won't be able to pack them like this with CSS alone: http://masonry.desandro.com/ — Blender, Jun 22 '14 at 15:45

score 1 · Answer 1 · answered Jun 22 '14 at 15:48

1

Make them all float:left or display:inline-block. Or better use sth like Bootstrap Grid system

answered Jun 22 '14 at 15:48

thyforhtian

366
3
9

Thank you, using float:left worked. However it also meant that the boxes are no longer inside the "main" div, which floats center. – Yaxlat Jun 22 '14 at 16:03
You should seriously consider Twitter bootstrap grid (or Foundation if preferred). If you really want to do it _by yourself_ then don't use percentage for width in #main, make it `margin: 0 auto` and if you want it to be responsive use [media queries](http://stackoverflow.com/questions/4189868/what-does-media-screen-and-max-width-1024px-mean-in-css) – thyforhtian Jun 22 '14 at 16:39

score 0 · Answer 2 · answered Jun 22 '14 at 16:04

There are endless ways to position your content. Here is an example of what can be achieved using floats.

Have an example!

HTML

<div id="wrap">
    <div id="header"></div>
    <div id="paneOne"></div>
        <div class="minPane"></div>
        <div class="minPane"></div>
        <div class="minPane"></div>
        <div class="minPane"></div>
        <div id="wideMinPane"></div>
    <div id="afterMini"></div>
</div>

CSS

#wrap {
    width: 800px;
    margin: 0 auto;
}
#header {
    height: 200px;
    background: #F00;
}
#paneOne {
    width: 400px;
    height: 500px;
    background: #000;
    float: left;
}
.minPane {
    float: left;
    width: 198px;
    height: 200px;
    background: #FF0;
    border: solid 1px #000;
}
#wideMinPane {
    float: left;
    background: #F00;
    border: solid 1px #000;
    height: 90px;
    background: #FF0;
    width: 398px;
}
#afterMini {
    height: 300px;
    background: #F00;
    clear: left;
}

Thank you, using float:left worked. However it also meant that the boxes are no longer inside the "main" div, which floats center. — Yaxlat, Jun 22 '14 at 16:24

score -1 · Answer 3 · answered Jun 22 '14 at 15:44

-1

Its simple. Set the width of the container div (which encloses all these div blocks)to some value.

Then give float:left to all the inner divs.

answered Jun 22 '14 at 15:44

Bharath

519
4
7

How to make arrange div containers in CSS?

3 Answers3