How to keep DIV from overlapping? - html

Question

I am making a CSS design for a SIM game I play, and a customer asked for 4 boxes, two large and in between them, two horizontally aligned boxes. They work fine, unless I try and add headers. The entire website is set up in a ridiculous amount of tables, basically coding from the 90s. All boxes I have made are div and aligned to meet up with the existing boxes on the page.
The main boxes are how I want the headers on all four boxes, separate and do not scroll. However, as you can see from this fiddle, nothing is aligning. When I try to put headers on the horizontal boxes, it really messes up the align. I am a fairly new coder, and would greatly appreciate some help.
div {
display: block;
color: #fff;
}
.topcontain{
width:500px;
height:300px;
}
.topleftbox {
width:240px;
height:300px;
overflow:auto;
float:left;
background:#505665;
color:#fff;
text-align:center;
display:block;
font-family: 'Snippet', sans-serif;
font-size: 12px!important;
margin: 5px;
opacity: .75;
}
.toprightbox {
width:240px;
height:300px;
overflow:auto;
float:right;
background:#505665;
color:#fff;
text-align:center;
display:block;
font-family: 'Snippet', sans-serif;
font-size: 12px!important;
margin: 5px;
opacity: .75;
}
.bottomcontain {
width:500px;
height:300px;
}
.header {
width:500px;
float:center;
background:#060e23;
color:#fff;
text-align:center;
display:block;
font-size: 14px;
border: 1px solid #030711;
opacity: 1.0;
}
.bottombox {
width:500px;
height:300px;
overflow:auto;
float:center;
background:#505665;
font-size: 12px;
color:#fff;
text-align:center;
display:block;
font-family: 'Snippet', sans-serif;
opacity: .75;
}
.credit {
width:500px;
float:center;
background:#060e23;
color:#fff;
text-align:center;
display:block;
font-size: 12px;
border: 1px solid #030711;
opacity: .85;
}
.top {
font-family: 'Snippet', sans-serif;
background : #060e23;
color : #fff;
font-size : 15px;
padding : 5px 15px;
font-weight : normal;
text-align : center;
border: 1px solid #030711;
opacity: .90;
}
Here is how it looks on the page I am coding:
example
Thank you again!

Answer 1

http://jsfiddle.net/6bEsE/6/
<div class="bottomcontain">
<div class="header">Lorem ipsum</div>
<div class="bottombox">
[TOP]
</div>
</div>
<div class="topcontain">
<div class="topleftbox">
<div class="top">Lorem ipsum</div>
<div>
[MIDDLE LEFT]
</div>
</div>
<div class="toprightbox">
<div class="top">Lorem ipsum</div>
<div>
[MIDDLE RIGHT]
</div>
</div>
</div>
<div class="bottomcontain">
<div class="header">Lorem ipsum</div>
<div class="bottombox">
[BOTTOM]
</div>
</div>
<div class="credit">Layout and CSS by Echo [#15480]</div>
I did a fast clean of your code (5 minutes)
But it is far from finishing it
First of all, you have bad closing of divs.
Second, you have fixed height for divs. A div with fixed width and height and more text than can fit in it will create scrolls.
before inserting all that text, try to fix the containers starting from the simple example i provided above. Also you may need to change a bit the html structure, to group those floating middle divs.

Answer 2

Demo Fiddle
In CSS
.clear{
clear:both;
}
In HTML
<div class="clear"> </div>