100% Испытание: строим сетку [27/32]. Прошу проверки специалистом на предмет валидности.


#1
<body>
    <div class="head">
        <div class="header-container positioner">
            <span>Header</span>
        </div>
        <div class="menu">
            <div class="menu-container positioner">
                <span>Menu</span>
            </div>
        </div>
        <div class="promo-container positioner">
            <div class="promo1">
                <span>Promo 1</span>
            </div>
            <div class="promo2">
                <span>Promo 2</span>
            </div>    
        </div>
    </div>
    
    <div class="content positioner">
        <div class="left-column">
            <span>Left</span>
        </div>
        <div class="main-column">
            <span>Main</span>
        </div>
        <div class="right-column">
            <span>Right</span>
        </div>
    </div>
    
    <div class="footer-container">
        <div class="positioner">
            <span>Footer</span>
        </div>
    </div>
</body>

html,
body {
    margin: 0;
    padding: 0;
}

body {
    width: 450px;
    height: 335px;
    font-family: "Arial", sans-serif;
    font-size: 10px;
    color: white;
}

.head {
    background-color: #34495e;
    padding-top: 10px;
}

.menu   {
    background-color: #3498DB;
    margin-top: 10px;
}

.header-container   {
    background-color: #c0392b;    
    min-height: 35px;
}

.menu-container {
    min-height: 35px
}

.promo-container    {
    padding: 10px 0px;    
}

.promo1,
.promo2 {
    background-color: #c0392b;
    float: left;
    margin-right: 10px;
    width: 170px;
    min-height: 60px;
}

.promo2 {
    margin-right: 0px;
}

.content    {
    padding: 10px 0px;
}

.left-column,
.main-column,
.right-column   {
    background-color: #3498DB;
    float: left;
    margin-right: 10px;
    min-height: 110px;
    width: 70px;
}

.main-column    {
    width: 190px;
}

.right-column   {
    margin-right: 0px;
}

.footer-container {
    background-color: #34495e;
    min-height: 40px;
}

.positioner {
    width: 350px;
    margin: 0 auto;
}

.positioner::after  {
    display: table;
    content: "";
    clear: both;
}

span    {
    display: block;
    padding-top: 5px;
    padding-left: 5px;
}

#2

Хороший код, только вместо span лучше тег p, его блочным с помощью css делать не придется.


#3

Спасибо за такую оперативность!