What is the right way to make this layout working? - css

Question

What seemed to be a simple task turned out to be quite a problem. I am trying to find a way to both preserve the vertical alignment of green DIVs and to prevent the absolute positioned DIV from overlapping the contents that follows.
Since I had to use absolute positioning not to destroy the alignment, I am now looking for a solution to another problem that showed up as a consequence.
Here is the code:
body {
background-color: #ddd;
}
h1 {
color: #FFFFFF;
background-color: #0000FF;
padding: 5px;
}
#container {
height: 100%;
width: 100%;
display: table;
}
#inner {
vertical-align: middle;
display: table-cell;
position: relative;
}
#inner2 {
vertical-align: middle;
display: table-cell;
}
#gauge_div {
width: 240px;
height: 240px;
margin: 0 auto;
background-color: green;
}
#gauge2_div {
width: 240px;
height: 240px;
margin: 0 auto;
background-color: green;
}
#heading {
width: 100%;
margin: 0 auto;
text-align: center;
color: blue;
}
#below {
margin: 0 20px;
text-align: center;
color: blue;
clear: both;
}
.graph {
margin: 0 auto;
padding: 10px 0;
text-align: center;
color: blue;
border: thin solid #00F;
}
#container_main {
padding-right: 100px;
padding-left: 100px;
}
#thermometer {
margin: 0 auto;
padding: 10px 0px 10px 0;
background-color: gray;
}
#thermometer2 {
margin: 0 auto;
padding: 10px 20px 10px 0;
background-color: gray;
}
.below_gauge {
font-weight: bold;
color: blue;
}
.below_container {
position: absolute;
left: 0;
right: 0;
}
.below_gauge2 {
width: 240px;
color: blue;
position: relative;
margin: auto;
}
.below_gauge3 {
width: 240px;
color: blue;
position: relative;
margin: auto;
border: thin solid #F00;
}
<div id="container_main">
<div id="heading"><h1>The title</h1></div>
<div class="graph">
<div id="container">
<div id="inner">
<div id="gauge_div"></div>
<div class="below_gauge">Text #1</div>
<div class="below_container">
<div class="below_gauge2">Here I would like to display some text but would not like the left square to be misaligned with the right one. That has been solved.</div>
<div class="below_gauge3">I do not want the contents of this DIV to overlap the contents below. This DIV can contain any ammount of text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text.</div>
</div>
</div>
<div id="thermometer">
<canvas id="termometar_cnv" width="160" height="600"></canvas>
</div>
<div id="inner2">
<div id="gauge2_div"></div>
<div class="below_gauge">Text #2</div>
</div>
<div id="thermometer2">
<canvas id="termometar2_cnv" width="160" height="600"></canvas>
</div>
</div>
<div id="below">Is there a way to make the DIV with the red border to push down this DIV so the DIV with the red border would not overlap what is below?
</div>
</div>
</div>
I made this code based on the answer (that I accepted) to my question when I had problems with how to allign two green DIVs. As can be seen the solution was to use absolute positioning but now that caused a problem because every absolute positioned element is according to CSS specification removed from the flow.

Answer 1

Try once Left-margin and right-margin.