So I have multiple div sections on my webpage, and they are arranged vertically in the following manner: However, I would like them to appear more like this: This is the structure of my HTML:
<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 this is my CSS:
#main {
max-width: 1280px;
width: 90%;
margin: 0 auto;
background-color: #b0e0e6; /* temporary color */
}
#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 may vary. I'm looking for guidance on how to achieve the desired appearance for my website. Thank you.