Div placements and css and code clean up - html

Question

This is what I am working on http://www.pathfinderscc.com/index.htm
The divs on the colored boxes are validating strict but Im not sure the coding is as it should be. Nor the CSS.
Its confusing what to do here, so I am wondering if there is a more appropriate way to align these divs. Also, the images are set to background and I know how to make them contained in the divs themselves, but not the css.
I also want to have the text inside the boxes, be underneath the boxes.
I am going to have images of videos, but the videos themselves. I want the page to load fast and then link to the individual videos I will host. I need this page at least to validate strict.
So far it does, but something tome could be better about this coding.
Here is the code.
<div class="container">
<h2>Videos</h2>
<div class="red">Beginer
<div id="container2">
<div id="left1"><p>
Introduction</p>
</div>
<div id="center1">B</div>
<div id="right1">C</div>
</div>
</div>
<div class="blue">Intermediate
<div id="container3">
<div id="left2">A</div>
<div id="center2">B</div>
<div id="right2">C</div>
</div>
</div>
<div class="green">Advanced
<div id="container4">
<div id="left3">A</div>
<div id="center3">B</div>
<div id="right3">C</div>
</div>
</div>
</div>
And the CSS
}
.container {
position: relative;
margin: auto;
width: 500px;
height: 500px;
text-align: center;
}
.red {
background-color: #f00;
width: 500px;
height: 125px;
margin: 15px auto;
padding-top: 5px;
box-shadow: 10px 10px 5px #888888;
}
.blue {
background-color: yellow;
width: 500px;
height: 125px;
margin: 15px auto;
padding-top: 5px;
box-shadow: 10px 10px 5px #888888;
}
.green {
background-color: green;
width: 500px;
height: 125px;
margin: 15px auto;
padding-top: 5px;
box-shadow: 10px 10px 5px #888888;
}
#container2 {
width:350px;
text-align:center;
margin:0 auto;
padding: 8px;
}
#left1 {
float:left;
width:75px;
height: 75px;
background: #888;
background-image:url('images/temp-3.jpg');
}
#center1 {
display: inline-block;
margin:0 auto;
width:75px;
height: 75px;
background: #888;
background-image:url('images/temp-3.jpg');
}
#right1 {
float:right;
width:75px;
height: 75px;
background: #888;
background-image:url('images/temp-3.jpg');
}
#container3 {
width:350px;
text-align:center;
margin:0 auto;
padding: 8px;
}
#left2 {
float:left;
width:75px;
height: 75px;
background: #888;
background-image:url('images/temp-2.jpg');
}
#center2 {
display: inline-block;
margin:0 auto;
width:75px;
height: 75px;
background: #888;
background-image:url('images/temp-2.jpg');
}
#right2 {
float:right;
width:75px;
height: 75px;
background: #888;
background-image:url('images/temp-2.jpg');
}
#container4 {
width:350px;
text-align:center;
margin:0 auto;
padding: 8px;
}
#left3 {
float:left;
width:75px;
height: 75px;
background: #888;
background-image:url('images/temp-1.jpg');
}
#center3 {
display: inline-block;
margin:0 auto;
width:75px;
height: 75px;
background: #888;
background-image:url('images/temp-1.jpg');
}
#right3 {
float:right;
width:75px;
height: 75px;
background: #888;
background-image:url('images/temp-1.jpg');
}

Answer 1

At first glance, you should generally be using classes, not IDs. That way elements that share the same CSS (container2, container3, etc, for example) can use the same class and you do not have to duplicate the CSS between different IDs. Similarly, elements can have more than one class. For example, change class="red" to class="color red" and use this:
.color {
width: 500px;
height: 125px;
margin: 15px auto;
padding-top: 5px;
box-shadow: 10px 10px 5px #888888;
}
.red {
background-color: #f00;
}
.blue {
background-color: yellow;
}
.green {
background-color: green;
}
That way, .color can be applied to any element and your code becomes much more maintainable.

Answer 2

Just another tip. You can also use CSS Prettifiers to increase your performance. Check ProCSSor

Answer 3

I'd set up your CSS classes to be more reusable. There would be shared settings for these blocks in say a "image-block" class, and then the other settings for left/right/center in other classes.
I see a nice example of the CSS for such, so here's an example of how your HTML might change (using similar but differently named classes.)
<div class="container container-red">
<div class="image-block block-left">
<img src="...">
<p>A</p>
</div>
<div class="image-block block-center">
<img src="...">
<p>B</p>
</div>
<div class="image-block block-right">
<img src="...">
<p>C</p>
</div>
</div>