Placing divs side by side, but not in line - html

Question

Consider the follwoing html code:
<h3>CPU Plot </h3>
<div id="CPU1"></div>
<h3>CPU Plot </h3>
<div id="CPU2"></div>
<h3>CPU Plot </h3>
<div id="CPU3"></div>
<h3>CPU Plot </h3>
<div id="CPU4"></div>
CSS goes like this:
#CPU1{
width:600px;
height:300px;
margin-top: 20px;
float:left;
}
#CPU2{
width:600px;
height:300px;
margin-top: 20px;
float:right;
}
#CPU3{
width:600px;
height:300px;
margin-top: 20px;
float:left;
}
#CPU4{
width:600px;
height:300px;
margin-top: 20px;
float:right;
}
I need to place all the four divs side by side, i.e. CPU1 and CPU2, beside each other and in the next line CPU3 and CPU4 (beside each other).
But it is not organised. My CPU1 tag is not inline with CPU2 tag, but when I remove the <h3> tag then all the divs are inline.
How can I have the title on the div tags?
An image for your reference. Click Here
I need this but with Title: Required

Answer 1

You should add the inside the DIV. Such as:
<div id="CPU1">
<h3>CPU Plot </h3>
<div class="add_graph_here"></div>
</div>
<div id="CPU2">
<h3>CPU Plot </h3>
<div class="add_graph_here"></div>
</div>
<div id="CPU3">
<h3>CPU Plot </h3>
<div class="add_graph_here"></div>
</div>
<div id="CPU4">
<h3>CPU Plot </h3>
<div class="add_graph_here"></div>
</div>
However, if your browsers width is wide enough (+1800px) the boxes will be plaxed incorrectly (according to your expectations).
For this reason, add in the CSS:
#CPU1{
width:50%;
height:300px;
margin-top: 20px;
float:left;
}
#CPU2{
width:50%;
height:300px;
margin-top: 20px;
float:right;
}
#CPU3{
width:50%;
height:300px;
margin-top: 20px;
float:left;
}
#CPU4{
width:50%;
height:300px;
margin-top: 20px;
float:right;
}
.add_graph_here { /*this represents your graph*/
height: 200px;
width: 200px;
background: #DDD;
border: 4px solid #ABABAB;
}
DEMO

Answer 2

Wrap divs in rows like
<div class="wrapper">
<div class="row">
<div id="CPU1"></div>
<div id="CPU2"></div>
</div>
<div class="row">
<div id="CPU3"></div>
<div id="CPU4"></div>
</div>
</wrapper>
give all CPU divs
float: left
and for row
.row {
float: left;
}
and for wrapper
.wrapper {
with: 1200px;
}

Answer 3

you can use float here. Take a look at this click me

Answer 4

You need to wrap your blocks and add "clear: left" to third block
HTML:
<div id="CPU1">
<h3>CPU Plot </h3>
<div></div>
</div>
<div id="CPU2">
<h3>CPU Plot </h3>
<div></div>
</div>
<div id="CPU3">
<h3>CPU Plot </h3>
<div></div>
</div>
<div id="CPU4">
<h3>CPU Plot </h3>
<div></div>
</div>
CSS:
#CPU1{
width:600px;
height:300px;
margin-top: 20px;
float: left;
}
#CPU2{
width:600px;
height:300px;
margin-top: 20px;
float: left;
}
#CPU3{
width:600px;
height:300px;
margin-top: 20px;
float: left;
clear: left;
}
#CPU4{
width:600px;
height:300px;
margin-top: 20px;
float: left;
}
then add your content to empty div's

Answer 5

<div id="CPU1" style=" height:400px;">
<h3>CPU Plot </h3>
<div id="CPU1" style="border:1px solid;"></div>
</div>
<div id="CPU2" style=" height:400px;">
<h3>CPU Plot </h3>
<div id="CPU2" style="border:1px solid;"></div></div>
<div id="CPU3" style=" height:400px;">
<h3>CPU Plot </h3>
<div id="CPU3" style="border:1px solid;"></div>
</div>
<div id="CPU4" style=" height:400px;">
<h3>CPU Plot </h3>
<div id="CPU4" style="border:1px solid;"></div>
</div>
just for example style according to your requirement.

Answer 6

I think this may help you:
HTML:
<div class="row">
<div id="CPU1">
<h3>CPU Plot </h3>
cpu1
</div>
<div id="CPU2">
<h3>CPU Plot </h3>
cpu2
</div></div>
<div class="row">
<div id="CPU3">
<h3>CPU Plot </h3>
cpu3
</div>
<div id="CPU4">
<h3>CPU Plot </h3>
cpu4
</div></div>
CSS:
#CPU1{
width:100px;
height:100px;
float:left;
display: inline-block;
}
#CPU2{
width:100px;
height:100px;
float:right;
display: inline-block;
}
#CPU3{
width:100px;
height:100px;
float:left;
display: inline-block;
}
#CPU4{
width:100px;
height:100px;
float:right;
display: inline-block;
}
.row{
width:300px;
clear:left;
}
http://jsfiddle.net/htevn7Ln/2/
You can also remove container rows and add "clear:left" to #CPU3.