Css позиционирование столбцов

Question

Я пытаюсь создать простую среду CSS, которая позволяет мне переключаться с макетов, таких как sidebar-content, sidebar-sidebar-content и т. Д. Проблема, с которой я сталкиваюсь, связана с компоновкой sidebar-content-sidebar.HTML-код выглядит так:

<div class="content">
<h2>Content</h2>
</div>
<div class="sidebar-alt">
<h2>sidebar-alt</h2>
</div>
<div class="sidebar">
<h2>sidebar</h2>
</div>

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

Используя немного CSS, можно было достичь этого

body.sidebar-content-sidebar #container.width-960 .content {
    width: 460px;
    position: relative; 
    left: 160px;
    top: 55px;
}
body.sidebar-content-sidebar #container.width-960 .sidebar {
    width: 300px;
    margin: 0 0 0 0;
    position: absolute; 
    top: 55px;
    left: 639px;

}
body.sidebar-content-sidebar #container.width-960 .sidebar-alt {
    width: 140px;
    margin: 0 0 0 0;
    position: absolute; 
    top: 55px;
}

Однако навигация, которая является суперфишей, теперь не работает.Есть ли способ позиционирования столбцов с помощью простых поплавков?Или каково решение?

Answer 1

Поместите содержимое в «центр» в HTML, а затем просто поместите их все влево. Не беспокойтесь по поводу установки сверху и слева.

<div class="sidebar-alt">
<h2>sidebar-alt</h2>
</div>
<div class="content">
<h2>Content</h2>
</div>
<div class="sidebar">
<h2>sidebar</h2>
</div>

Другой способ -

<div class="left" style="float:left;">
 <div class="sidebar-alt"  style="float:left;">
 <h2>sidebar-alt</h2>
 </div>
 <div class="content"  style="float:right;">
 <h2>Content</h2>
 </div>
</div>
<div class="sidebar" style="float:right;">
<h2>sidebar</h2>
</div>

Обязательно установите ширину. Вот пример http://ewsbuild.com/~johnsplu/

Answer 2

Вот хорошее начало того, что вы пытаетесь сделать:

div.content {
    width: 460px;
    position: relative; 
    left: 160px;
    top: 55px;
    background-color: red;
}
div.sidebar {
    width: 300px;
    margin: 0 0 0 0;
    position: absolute; 
    top: 55px;
    left: 639px;
    background-color: green;
}
div.sidebar-alt {
    width: 140px;
    margin: 0 0 0 0;
    position: absolute; 
    top: 55px;
    background-color: blue;
}

Цвет фона только для визуализации элементов div.(может также помочь вам с полями)