css 2 макет столбца

Question

У меня есть базовый макет CSS с двумя столбцами, CSS выглядит

#sidebar {
    width:100px;
}
#main {
    margin-left:100px;
}

И некоторые образцы HTML

<div id="content">
  <div id="sidebar">some sidebar content</div>
  <div id="main">some main content</div>
</div>

Это работает, но кажется повторяющимся и подверженным ошибкам, что ширина боковой панели должна соответствовать значению поля слева. Есть лучший способ сделать это?

Answer 1

Вы можете использовать float собственность на #sidebar:

#sidebar {
    width:100px;
    float: left;
}

Пример JS Fiddle

---

Однако, используя вышеуказанный метод, если содержание #main заставляет его высоту расширяться ниже #sidebar, он будет завернут под боковую панель. Чтобы избежать этого, используйте display:table-cell имущество:

#sidebar, #main {
    display: table-cell;
}

Пример JS Fiddle

Answer 2

CSS

#sidebar { width:100px; float: left; }
#main { float: right; }

HTML

<div id="content">
    <div id="sidebar">my stuff</div>
    <div id="main">some main content</div>
    <div style="clear:both;"></div>
</div>

Я рекомендую 960.gs или BlueprintCSS для стилей basic-html/css.

Answer 3

Вы можете вложить sidebar внутри main дающий main отступы слева и sidebar A -ve маржа.

#content{
    width: 100%;
}
#sidebar, #main{
    float: left;
    display: block;
}
#sidebar{
    width: 100px;
    background-color: orange;
    margin-left: -100px;
}
#main{
    padding-left: 100px;
    background-color: green;
    width: 100%;
}

<div id="content">
    <div id="main">
        <div id="sidebar">some sidebar content</div>some main content
    </div>
</div>

Вот рабочая демка.