html - How to keep DIV from overlapping? -

html - How to keep DIV from overlapping? -

i making css design sim game play, , client asked 4 boxes, 2 big , in between them, 2 horizontally aligned boxes. work fine, unless seek , add together headers. entire website set in ridiculous amount of tables, coding 90s. boxes have made div , aligned meet existing boxes on page.

the main boxes how want headers on 4 boxes, separate , not scroll. however, can see fiddle, nil aligning. when seek set headers on horizontal boxes, messes align. new coder, , appreciate 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 how looks on page coding: example

thank again!

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 , css echo [#15480]</div>

i did fast clean of code (5 minutes) far finishing it

first of all, have bad closing of divs. second, have fixed height divs. div fixed width , height , more text can fit in create scrolls.

before inserting text, seek prepare containers starting simple illustration provided above. may need alter bit html structure, grouping floating middle divs.

html css alignment