Why are my divs dissappearing? - html

Question

So I'm trying to make a color block-style page with divs with colored backgrounds. Only the divs do not show up, nor does their background color.
Ideally it will be 4 rows of boxes (200px in height) with:
2 boxes in row 1
1 box in row 2
3 boxes in row 3
1 box in row 4
.Box {
height: 200px;
background-color: #BD2128;
display: block;
text-align: center;
overflow: auto;
margin-top: 15px;
margin-bottom: 15px;
}
.Box h3 {
color: #FFFFFF;
line-height: 40px;
}
.Box:hover {
background-color: #C0C0C0;
}
.DivContainer {
float: left;
width: 90%;
margin-left: 5%;
overflow: auto;
height: auto;
}
.Whole {
float: left;
width: 90%;
margin-left: 5%;
}
.Half {
float: left;
width: 47.5%;
}
.Third {
float: left;
width: 30%;
}
.Between {
float: left;
width: 5%;
height: 10px;
}
<div class="DivContainer">
<div class="Box Half" id="IndividualTraining">
<h3>Individual or Group Training</h3>
</div>
<!-- class="Half" -->
<div class="Between"></div>
<div class="Box Half" id="TrainingCamps">
<h3>Training Camps</h3>
</div>
<!-- class="Half" -->
</div>
<!-- class="DivContainer" -->
<div class="Box Whole" id="TeamTraining">
<h3>Team Training</h3>
</div>
<!-- class="Whole" id="TeamTraining" -->
<div class="DivContainer">
<div class="Box Third" id="TOCA for Tots">
<h3>TOCA for Tots</h3>
</div>
<!-- class="Third" id="TOCA for Tots" -->
<div class="Between"></div>
<div class="Box" class="Third" id="BirthdayParties">
<h3>Birthday Parties</h3>
</div>
<!-- class="Third" id="BirthdayParties"-->
<div class="Between"></div>
<div class="Box" class="Third" id="CorporateEvents">
<h3>Corporate Events</h3>
</div>
<!-- class="Third" id="CorporateEvents" -->
</div>
<!-- class="DivContainer" -->
<div class="Box Whole" id="Futsal">
<h3>Futsal</h3>
</div>
<!-- class="Whole" id="Futsal" -->

Answer 1

Check this simplified example... JSFiddle Example
The <div class="DivContainer"> divs were removed
The <div class="Between"></div> spacer divs were removed
A new wrapper div called <div class="container"> includes all the divs, and makes it easier to simulate the 90% width on all the rows using padding.
A "Clear Float" was used on the "Team Training" and "Futsal" divs. Clearing the floats is important for a floated layout structure to work. For more info, check out this easy to understand page http://css-tricks.com/all-about-floats/
The CSS was simplified and the padding from the Container div along with the margins and div widths, combine for even spacing (equaling 100% width per row).
HTML
<div class="container">
<div class="Box Half left" id="IndividualTraining">
<h3>Individual or Group Training</h3>
</div>
<div class="Box Half left" id="TrainingCamps">
<h3>Training Camps</h3>
</div>
<div class="Box Whole clear-float" id="TeamTraining">
<h3>Team Training</h3>
</div>
<div class="Box Third left" id="TOCA for Tots">
<h3>TOCA for Tots</h3>
</div>
<div class="Box Third left" id="BirthdayParties">
<h3>Birthday Parties</h3>
</div>
<div class="Box Third left" id="CorporateEvents">
<h3>Corporate Events</h3>
</div>
<div class="Box Whole clear-float" id="Futsal">
<h3>Futsal</h3>
</div>
CSS
.container {
padding:2% 5% 0% 5%;
margin:0;
border:0;
}
.Box {
height:200px;
background-color:#BD2128;
text-align:center;
padding:0;
border:none;
margin:0% 1% 2% 1%;
}
.Box h3 {
color:#FFFFFF;
line-height:40px;
}
.Box:hover {
background-color:#C0C0C0;
}
.Whole {
}
.Half {
width:48%;
}
.Third {
width:31.3%;
margin-top:0%;
}
.left {
float:left;
}
.clear-float {
clear:both;
}
Things that may give you minor issues in a floated structure are "Margin Collapse" which may cause an unexpected top or bottom margin size, and the "Box Model" which may cause the rows that contain the floated divs to equal more than 100% of the screen width, and cause the floated divs to bump down to the next row.