DIV-только два столбца CSS макет

Question

Я переделываю макет, в настоящее время использующий таблицы для двухколоночного дизайна, и столкнулся с некоторыми проблемами.

<div id="frame">

 <div id="leftcol">
  <div id="1">blah</div>
 </div>

 <div id="leftcol">
  <div id="2">blah</div>
  <div id="3">blah</div>
 </div>

</div>

#leftCol
{
 margin-right: 10px;
 width: 49%;
 float: left;
}

#rightCol
{ 
 width: 49%;
 float: left;
}

Изначально у меня была двухколонная таблица с width=100% - в Firefox это прекрасно работало, но в IE таблица переполняла контейнер #frame div. Я удалил эту таблицу и добавил два числа с плавающей точкой, но у меня все еще есть проблемы с получением столбцов равными.

Весь мой контент находится внутри div #frame, который имеет ограничения по высоте, а также отступы и поля (я использую это, чтобы оставить «желоб» по краю страницы).

Мне нужно, чтобы два плавающих столбца DIV были одинаковой ширины, и чтобы они сидели рядом друг с другом с промежутком в 10px (ish) между ними. Я попытался сделать оба width: 50%, но это не удалось, потому что контейнер, в котором они находятся (#frame), меньше по ширине, чем все тело страницы. (Если я избавлюсь от заполнения желоба, он будет работать в FF, но не в IE.

Создание ширины каждого столбца: 49% работает, но выглядит некрасиво, поскольку размер изменяется между браузерами, и правый столбец не совпадает с краем контейнера #frame.

Я пытался сделать это раньше, но в конечном итоге вернулся к таблицам 9, так как казалось, что это работает), но теперь, когда я вижу, что это несовместимо с IE, я часами работал над поиском кросс-браузерного решения CSS. Есть идеи?

Answer 1

Настройка каждого столбца на 50% должна работать, если вы убедитесь, что у них нет полей или отступов.

Если им нужно заполнение, добавьте дополнительный div-обертку, который может иметь столько же отступов / полей, сколько необходимо.

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

Размещение примера с полным кодом (например, на jsbin.com) также поможет нам легче понять вашу проблему. :)

Answer 2

Хорошо, вот и все.Вот как это может быть достигнуто.

CSS

#leftCol, #rightCol{
    width: 48%;
    float: left;
    background: red;
    box-sizing: border-box;
}

#leftCol{
    margin-right: 1%; 
}

#rightCol{ 
    margin-left: 1%; 
}

HTML

<div id="frame">

    <div id="leftcol">
      <div id="1">blah</div>
     </div>

     <div id="rightCol">
      <div id="2">blah</div>
      <div id="3">blah</div>
     </div>

</div>

Если вам нужен здесь префикс вендора для размеров коробкив вашем HTML есть опечатка, когда оба div называются #leftCol.Там нет #rightCol.

Answer 3

Если вы знаете ширину рамки, вы можете сделать это

#frame {
    background-color: green;
    width: 500px;
    overflow: auto;
}

#leftCol
{
    width: 245px;
    float: left;
    background-color: red;
}

#rightCol
{
    width: 245px;
    float: right;
    background-color: blue;
}

<div id="frame">

    <div id="leftCol">
    <div id="1">blah</div>
    </div>

    <div id="rightCol">
    <div id="2">blah</div>
    <div id="3">blah</div>
    </div>

</div>

В противном случае добавьте дополнительный div, и сделайте это

<div id="frame">

    <div id="leftCol">
    <div id="hack">
        <div id="1">blah</div>
    </div>
    </div>

    <div id="rightCol">
    <div id="2">blah</div>
    <div id="3">blah</div>
    </div>

</div>

#frame {
    background-color: green;
    width: 500px;
    overflow: auto;
}

#leftCol
{
    width: 50%;
    float: left;
}

#hack {
    margin-right: 10px;
    background-color: red;
}

#rightCol
{
    width: 50%;
    float: right;
    background-color: blue;
}

Answer 4

Я думаю, что вы могли бы получить выгоду от CSS-фреймворка, такого как 960gs или blueprint css, он обеспечивает абсолютное размещение в сетке и является кросс-браузерно совместимым из коробки.

http://www.blueprintcss.org/

http://960.gs/