2-й столбец расположен ниже 1-го столбца. Каковы общие причины этого?

Question

Мой HTML-код слишком прост для размещения здесь.

У меня макет из 2 столбцов, 1-й столбец размером 160px, а 2-й столбец намного больше.

По какой-то причине 2-й столбец расположен ниже 1-го столбца.

Каковы общие причины этого?

Обновление

Я хочу вот что:

Колонка № 1 Колонка № 2

Что отображается ( Firefox в порядке, IE6 вызывает проблему ):

Колонка 1
Колонка 2

Update

2-й столбец обернут в

И у blueprintcss есть это:

.container:after {content:".";display:block;height:0;clear:both;visibility:hidden;}

Так что я думаю, это ясно: оба ?

Answer 1

Предполагая, что оба столбца плавают (слева), второй столбец будет располагаться под первым, если:

• Ему присвоено clear:left;
• он слишком широк для доступного пространства

Если проблема возникает в IE 6, это может быть ошибка IE 6 с 3 пикселями .

(Вероятно, у нас будет больше шансов помочь вам, если вы добавите какой-то фактический код в сообщение. На данный момент мы предполагаем.)

Обновление

Не думаю, что это clear: both; - это правило не повлияет на IE 6, поскольку оно не поддерживает псевдоселектор :after. Вот тестовая страница, демонстрирующая это:

http://www.pauldwaite.me.uk/testy.html

Answer 2

В дополнение к двум причинам Пола, вы должны иметь в виду ошибку IE6 с «двойной маржой».

В IE6 свойство float соответственно удваивает маржу (float: left; влияет на margin-left и наоборот).