Абсолютные столбцы в CSS

Question

Я хочу создать простой блог и использую родительскую тему (Sandbox) в Wordpress для этого. Я хочу использовать абсолютные столбцы и до сих пор основывался на статье Дэна Рубина: http://24ways.org/2008/absolute-columns

Моя проблема в том, что боковая панель не сместится вправо, как показано здесь: www.dearjasmina.com Очевидно, я новичок в этом, но любой совет поможет. Это код до сих пор:

#header {
height: 60px;
}

#container div {
margin: 0;
}

#container {
position: relative;
}

#access {
visibility: hidden;
height: 0;
margin: 0;
padding: 0;
}

#menu {
visibility: hidden;
height: 0;
margin: 0;
padding: 0;
}

#wrapper {
width:800px;
margin:auto;
padding:10px;
background-color:#f2f2f2;
border:10px solid #fff;
text-align:left;
}

div div {
background-color:#E6E6E6;
margin-bottom:10px;
padding:10px;
}

div div div {
background-color:#DADADA;
}

.sidebar {
bottom: 10px;
position: absolute;
right: 10px
top:10px
width: 200px;
}

.sidebar ul {
margin: 0;
padding: 0;
list-style-type: none;
}

#content {
width: 530px;
}

body {
margin:0;
font-family:"helvetica neue",helvetica,arial,sans-serif;
font-size:12px;
font-weight:bold;
text-transform:uppercase;
color:#a1a1a1;
text-align:center;
}

h2 {
font-size:12px;
text-align:center;
}

p {
font-weight:normal;
text-align:left;
text-transform:none;
line-height:1.2;
}

Answer 1

В дополнение к ответу Дэва выше, если я не ошибаюсь, вы захотите, чтобы боковая панель содержалась внутри класса контейнера как одноуровневое содержимое:

<div id="container">
  <div id="content"></div>
  <div class="sidebar"></div>
</div>

Answer 2

Вы забыли точки с запятой после строк top:10px и right:10px в .sidebar CSS:

.sidebar {
bottom: 10px;
position: absolute;
right: 10px
top:10px
width: 200px;
}

должно быть ...

.sidebar {
bottom: 10px;
position: absolute;
right: 10px;
top:10px;
width: 200px;
}

Answer 3

Немного неясно, что вы пытаетесь сделать здесь, у вас есть две боковые панели: #primary и #secondary. Если вы хотите, чтобы они оба отображались рядом, вам придется настроить их «правильное» свойство отдельно. Если вы хотите, чтобы они появлялись друг на друге, вы должны знать высоту единицы, и она не должна изменяться.

Во-первых, вы должны установить «положение» div # wrapper на относительное. Это заставит ваши элементы div.sidebar установить их положение относительно элемента div # wrapper, который их содержит.

div#wrapper {
    position: relative;
}

Без установки позиции: относительно div # wrapper ваши боковые панели будут позиционироваться абсолютно относительно элемента body.

Теперь, когда вы установили правильную систему координат для ваших абсолютно позиционированных боковых панелей, вы можете расположить их так, как вам удобно. В настоящее время они находятся в одинаковом положении и одинаковой ширины, поэтому они перекрывают друг друга. Вероятно, это не то, что вам нужно, попробуйте установить для свойства «right» значение 210px.

div#primary {
    right: 210px;
}

Теперь вы увидите все три столбца, ваш контент, первичную боковую панель и вторичную боковую панель. Ваша основная боковая панель, вероятно, перекрывает ваш контент, поэтому вы можете либо скрыть дополнительную боковую панель и переместить свою основную боковую панель обратно на «right: 10px», либо установить дополнительную боковую панель выше основной боковой панели, поскольку кажется, что ее содержимое не динамичный и не будет расти.

Если вы изучаете CSS, вы обязательно должны получить Firebug, чтобы вы могли просматривать и редактировать CSS на любом живом веб-сайте. Firebug