В чем плюсы/минусы способов реализации двухколоночного макета?

Рейтинг: 0Ответов: 1Опубликовано: 01.10.2014

Привет. Есть методика: 

.sidebar{
    float:left;
    background: #C6DD7D; /* Цвет фона */
    width: 180px; /* Ширина колонки */
}
.content {
    background: #F4ECCE; /* Цвет фона */
    margin-left:200px;
}

<div class="layout">
    <div class="sidebar">Колонка 1</div>
    <div class="content">Колонка 2</div>
</div>

Здесь используется margin-left для отступа между колонками и формирования второй колонки.

Но можно задать ширину и float обеим колонкам: 

.sidebar{
    float:left;
    background: #C6DD7D; /* Цвет фона */
    width: 180px; /* Ширина колонки */
}
.content {
    background: #F4ECCE; /* Цвет фона */
    margin-left:20px;
    float:left;width:780px;
}

Какой способ в каких ситуациях использовать?

css html
Источник: Stack Overflow на русском

Ответы

▲ 3Принят

В первом случае, у вас вторая колонка "резиновая".
Она растягивается и сужается вместе с изменением ширины окна браузера.
Она никогда не будет заезжать под первую колонку.

Во втором случае, у вас вторая колонка фиксированной ширины.
Если окно браузера будет меньше, чем суммарная ширина обеих колонок, она заедет под первую.
Если окно браузера будет больше, чем суммарная ширина обеих колонок, справа будет пустое место.

Когда какой вариант использовать, зависит полностью от поставленной задачи.
Универсальный ответ здесь только один: используйте тот вариант, который решает задачу.