Absolute columns in CSS

Question

I want to design a simple blog and am using a parent-theme (Sandbox) on Wordpress to do so. I want to use absolute columns and have so far based myself on Dan Rubin's article over here: http://24ways.org/2008/absolute-columns

My problem is that the sidebar won't move to the right as seen here: www.dearjasmina.com Obviously, I'm new at this, but any advice would help. This is the code so far:

#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

You forgot semicolons after the top:10px and right:10px lines in the .sidebar CSS:

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

should be...

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

Answer 2

In addition Dav's answer above, unless I'm mistaken, you will want to have the sidebar contained inside of the container class as a sibling of content:

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

Answer 3

It is a little bit unclear as to what you are trying to do here, you have two sidebars: #primary and #secondary. If you want them both to appear side by side, you will have to adjust their "right" property separately. If you want them to appear on top of each other, you must know the height of one and it must not change.

First, you must set the "position" of div#wrapper to relative. This will make your div.sidebar elements set their position relative to the div#wrapper element that contains them.

div#wrapper {
    position: relative;
}

Without setting the position: relative on div#wrapper, your sidebars will position themselves absolutely relative to the "body" element.

Now that you have set the correct frame of reference for your absolutely positioned sidebars, you can position them however you want. Currently, you have them both in the exact same position and the exact same width, which makes them overlap each other. This probably isn't what you want, try setting one to have a "right" property of 210px.

div#primary {
    right: 210px;
}

Now you will see all three of your columns, your content, primary sidebar, and secondary sidebar. Your primary sidebar is probably overlapping your content though, so you can either hide the secondary sidebar and move your primary sidebar back to "right: 10px", or set your secondary sidebar to be above the primary sidebar since it appears that its content is not dynamic and won't grow.

If you are learning CSS, you absolutely must get Firebug so that you can inspect and edit CSS on any live website. Firebug