Испытание: строим сетку [27/32] 100%. Какие замечания?

<body>
          <div class="wrapper1">
            <div class="header">Header</div>
            <div class="menu">Menu</div>
            <div class="promo1">Promo 1</div>
            <div class="promo2">Promo 2</div>
          </div>
          <div class="wrapper2">
            <div class="left">Left</div>
            <div class="main">Main</div>
            <div class="right">Right</div>
          <div class="footer">Footer</div>
        </div>
    </body>`Текст "как есть" (без применения форматирования)`

.wrapper1 {
width: 450px;
height: 170px;
background: #34495e;

}
.header {
width: 340px;
height: 25px;
background: #c0392b;
margin: 10px 0px;
display: inline-block;
padding: 5px;
margin-left: 50px;
}
.menu {
height: 25px;
background: #3498DB;
padding: 5px 55px;

}
.promo1,
.promo2 {
width: 160px;
height: 50px;
background: #c0392b;
margin-top: 10px;
padding: 5px;
}
.promo1 {
float: left;
margin-left: 50px;
}
.promo2 {
float:left;
margin-left: 10px;
}
.wrapper2 {
margin-top: 10px;
}
.left {
width: 60px;
height: 100px;
background: #3498DB;
padding: 5px;
float: left;
margin-left: 50px;
}
.main {
width: 180px;
height: 100px;
background: #3498DB;
padding: 5px;
float: left;
margin-left: 10px;
}
.right {
width: 60px;
height: 100px;
background: #3498DB;
padding: 5px;
float: left;
margin-left: 10px;
}
.footer {
width: 340px;
height: 30px;
background: #34495e;
display: inline-block;
margin-top: 10px;
padding: 5px 55px;
}

Если вкратце – структуру HTML нужно продумать получше.
Наберите в поиске “Испытание: строим сетку [27/32]”.
Просмотрите варианты других решений.

Подробнее отвечу позже…

Спасибо!

Должно быть вот так:
exemple1
Т.е. при заполнении странички контентом по высоте всё должно растягиваться, все отступы должны сохраняться. Сама страничка должна быть расположена по середине по горизонтали.

exemple2
Здесь пунктиром показана работа центровщика (в Вашем случае так должен работать wrapper). Слева и права должно быть одинаковое расстояние, а фон хедера и футера должен быть по всей ширине окна.

exemple3
Это результат работы Вашего кода.
Сетка прописана намертво – ничего не развалилось, но либо повываливалось, либо не поместилось.
А сама страничка привязана к левому краю окна.

А, в остальном всё хорошо!:grin:

1 лайк

Благодарю за помощь и потраченное время.