Два столбца в div - Какой из них использовать 1) float вместе с margin или 2) Two float

Question

У меня есть два div в контейнере. Один левый бар, а другой правый бар. Мне нужны некоторые советы / предложения, чтобы использовать какой метод.

Метод 1:

#container{ width:800px; margin:0 auto;}
#leftbar{ float:left; width:200px; }
#rightbar{ float:right: width:550px;}

Метод 2:

#container{width:800px; margin:0 auto;}
#leftbar{ float:left; width:200px; }
#rightbar{ margin:0 0 0 210px; width:550px;}

Пожалуйста, посоветуйте, какая из них является хорошей практикой.

Answer 1

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

Но если ваш контейнер становится больше, чем 800px, вы хотите, чтобы правая полоска прилипала к правой стороне контейнера? Если это так, будет работать только метод 1.

Однако есть другой метод, который достигает того же эффекта, что и метод 2, который перемещает оба деления влево.

Answer 2

Если вы хотите использовать надежный код, о котором не нужно много думать, то вы можете использовать основанную на сетке инфраструктуру, такую ​​как пользовательский интерфейс Yahoo или 960 grid .

Оба предлагают простые в использовании CSS / HTML-фреймворки, которые поддерживают различные макеты.

Answer 3

На данном этапе это не имеет никакого практического значения, но более перспективный метод - первый, так как он позволяет позже изменить ширину контейнера, не меняя правую css, чтобы сохранить ее полностью правой. выровнены.

Answer 4

Либо в порядке, но в методе 1 у вас будет «желоб» 50px между divами, тогда как в методе 2 будет только 10px

Answer 5

Семантически это не имеет значения, так как 550 + 200 ~ = 800 px, так что вы не даете никакой подсказки, что должны делать два div, например, когда. Контейнер 1000 пикселей.