Blog

Learn CSS Positioning in Ten Steps: position static relative absolute float

While working on a layout for a charity site I’m working on, I was working on some pretty fancy CSS layouts. Relative, Absolute, Fixed etc. I found this website to be an invaluable resource. If you have been playing with CSS positioning you know how many options there are.

I had a nice layout with a background that I wanted centred on the page. Then I had three columns that I wanted to position absolutely within the background div. The problem with my code was this:

This was my CSS:

<style>
#main-content {
width:1180px;
height:907px;
margin-left:auto;
margin-right:auto;
background-image:url(img/top-background.jpg);
background-repeat:no-repeat;
}

#footer {
height:137px;
background-image:url(img/bottom-background.png);
background-repeat:no-repeat;
margin-top:750px;
}

#left-column {
width:293px;
position: absolute;
top: 486px;
left: 109px;
}

#right-column {
width:293px;
min-height: 600px;
position: absolute;
top: 101px;
right: 120px}

#center-column {
width:340px;
position:absolute;
top: 100px;
right:428px;}

</style>

The problem with this was that when the browser was resized, the positioning changes with it. It doesn’t stay “relative” to the container div.

One quick fix, add position:relative to the container div. In my case #main-content. That was it. Now the columns stay relative to the container div and don’t move when the browser is resized.