[27/32] Проблемы с выравниванием слов в сетках.

Курсы §15. Сетки
1

HTML

<!DOCTYPE html>
<html>
    <head>
       <title>Испытание: строим сетку</title>
       <meta charset="utf-8">
    </head>
    <body>
            <div class="header">
                <div class="layout-positioner">
                    <div class="layout-head">
                        Header
                    </div>
                </div>
            </div>
            <div class="menu">
                <div class="layout-positioner">
                Menu
                </div>
            </div>
            <div class="promo">
                <div class="layout-positioner">
                    <div class="promo-1">
                            Promo 1
                    </div>
                    <div class="promo-2">
                            Promo 2
                    </div>
                </div>
            </div>
            <div class="container">
                <div class="layout-positioner">
                    <div class="sidebar sidebar-left">
                            Left
                    </div>
                    <div class="sidebar content">
                            Main
                    </div>
                    <div class="sidebar sidebar-right">
                            Right
                    </div>
                </div>
            </div>
            <div class="footer">
                <div class="layout-positioner">
                    Footer
                </div>
            </div>

    </body>
</html>

CSS

html, body{
    margin:0;
    padding:0;
}
body{
    width:450px;
    height:335px;
    font-family:'Arial', sans-serif;
    font-size:10px;
    color:white;
}
/*
    Используемые цвета:
    #34495e - мокрый асфальт
    #c0392b - красный
    #3498DB - синий
*/

.header {
    background-color: #34495e;
    min-height: 50px;
}

.layout-positioner{
    width:350px;
    margin: 0 auto;

}

.layout-positioner:after{
    content:'';
    clear:both;
    display:table;
}

.layout-head {
    background-color: #c0392b;
    width: 350px;
    float: left;
    min-height: 35px;
    margin: 10px auto;
}

.menu {
    background-color: #3498DB;
    height: 35px;
    width: 100%;
}

.promo {
    background-color: #34495e;
    min-height: 80px;
    margin-bottom: 10px;
}

.promo-1 {
    background-color: #c0392b;
    width: 170px;
    float: left;
    min-height: 60px;
    margin-right: 10px;
    margin-top: 10px;
}

.promo-2 {
    background-color: #c0392b;
    width: 170px;
    float: left;
    min-height: 60px;
    margin-right: 0px;
    margin: 10px auto;
}

.container {
    min-height: 100px;
    background-color: #fff;
}

.sidebar {
    background-color: #3498DB;
    min-height: 110px;
    width: 70px;
    margin-right: 10px;
}

.sidebar-left {
    float:left;

}

.content {
    float: left;
    width: 190px;
    margin-bottom: 10px;
}

.sidebar-right {
    float: right;
    margin-right: 0px;
}

.footer {
    background-color: #34495e;
    height: 35px;
}

Сетка встала идеально, результат 96% только из-за внутренних отступов слов. Подскажите, как выровнять слова в таком случае под образец?

2

Внутренними отступами сверху и слева.

1 лайк
3

Привязал отступы к div’ам, все слетело :slight_smile: Нужно было вначале сразу прописать, либо есть другой вариант?

div {
box-sizing: border-box;
padding-top: 5px;
padding-left: 5px;
}

Так стало лучше, но все равно сетке хана. Я так понял, не совсем удачную сетку я выстроил…

5

Понимаете, в чем дело… Элементы с классами layout-positioner и container- это тоже div-ы.
Перечислите через запятую в правиле все нужные вам селекторы. Не ленитесь и всё будет хорошо.
А сетка у вас образцовая можно сказать.

1 лайк