How to make arrange div containers in CSS? - html

Question

So I have several div containers for my website, and they stack vertically as follows:
and I want it to look more like this:
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.

Answer 1

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

Answer 2

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;
}

Answer 3

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.