Позиция: относительные и плавающие элементы

Question

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

Я понял, что плавание в левой колонке и использование position: relative с left: в правой колонке даст мне поведение, которое я хочу.

Моего HTML выглядит следующим образом:

<div class="row"> 
    <div class="sidebar">I'm a sidebar!</div> 
    <div class="main"> 
     <p>I'm main!</p> 
    </div> 
</div> 

и мой CSS выглядит следующим образом:

.sidebar { 
    float: left; 
    width: 200px; 
    border: 1px solid red; 
} 
.main { 
    position: relative; 
    left: 220px; 
    width: 500px; 
    border: 1px solid green; 
} 

Вот скрипка: http://jsfiddle.net/ttr5k/1/

К моему удивлению, содержание .main сдвинуто правый (как будто .main имел padding-left), казалось бы, из-за боковой панели. Почему это и как я могу это решить?

Я также подозреваю, что это не лучший способ построить сетку, есть ли лучший подход?

Answer 1

Добавить позицию абсолютного вместо относительной

http://jsfiddle.net/ttr5k/2/

Как вы можете видеть текст выравнивает снова налево

.sidebar { 
float: left; 
width: 200px; 
border: 1px solid red; 
} 
.main { 
position: absolute; 
left: 220px; 
width: 500px; 
border: 1px solid green; 
} 

Answer 2

Вот FIDDLE о том, как я хотел бы сделать это: http://jsfiddle.net/mikea80/zJa5P/

<div class="row"> 
    <div class="main"> 
     <p>I'm main!</p> 
    </div> 
    <div class="sidebar"><p>I'm a sidebar!</p></div> 
</div> 

.row { 
    margin: 0 auto; 
    width:704px; 
    clear:both; 
} 
.main { 
    display:inline-block; 
    float:right; 
    width: 500px; 
    border: 1px solid green; 
} 
.sidebar { 
    display:inline-block; 
    float: right; 
    width: 200px; 
    border: 1px solid red; 
} 

Со строкой bein г 700px этот код будет центрировать его

Answer 3

Я рекомендую делать что-то вроде этого:

.row { 
    background:#eee; 
    width:90%; 
    overflow:auto; 
    border:1px solid #ccc; 
    margin:20px auto; 
} 
.sidebar { 
    float: left; 
    width: 200px; 
    border: 1px solid red; 
} 
.main { 
    float:left 
    width: 500px; 
    border: 1px solid green; 
    overflow:auto; 
    clear:right; 
} 

Теперь вы сможете удалить боковую панель, когда вы хотите без добавления нового CSS

DEMO: http://jsfiddle.net/ttr5k/5/

OR ------ Если вы хотите это пространство, даже если нет боковой панели и все еще хотите, чтобы содержимое переполнялось:

http://jsfiddle.net/ttr5k/7/

.row { 
    background:#eee; 
    width:600px; 
    overflow:auto; 
    border:1px solid #ccc; 
    margin:20px auto; 
} 
.sidebar { 
    float: left; 
    width: 200px; 
    border: 1px solid red; 
} 
.main { 
    float:right; 

    width: 396px; /* This is due to box-model adding border as width */ 
    border: 1px solid green; 
    overflow:auto; 
    clear:right; 
} 

Answer 4

Вы должны добавить позицию абсолютного к врезке класса.

CSS:

.sidebar { 
    position: absolute; 
    float: left; 
    width: 200px; 
    border: 1px solid red; 
} 
.main { 
    position: relative; 
    left: 220px; 
    width: 500px; 
    border: 1px solid green; 
} 

Поверь мне, таким образом, вы можете добавить другой класс строк без каких-либо проблем. Вот FIDDLE:

http://jsfiddle.net/asubanovsky/bVr6r/