CSS relative positioning

[copaesthetic]

I have a question regarding relative positioning. I thought that when you assign the position of a div to "relative" that it would be shifted in relation to the containing div. In this case #content_left, #content_center and #content_right would be relative to #content

Unfortunately that is not what I am experiencing, #content_center is being shifted in relation to #content_left and #content_right is being shifted in relation to #content_center. Its as if they are being shifted in relation to the order I wrote them up on the style sheet. Any help?

* There is one caveat to my problem. #content_left, #content_center, #content_right cannot be absolute because if they were, they would be unable to utilize the background-color rule found in #content

http://i5.photobucket.com/albums/y159/devisi0n/example_rel.jpg

Code:

Testing this out. Testing this out. Testing this out.

• Packaging and Labels

Code:

body {
position : relative;
width : 1920px;
margin : 0 auto;
text-align : left;
}

#content {
position : absolute;
width : 976px;
left : 436px;
top : 280px;
padding: 37px;
background-color : #FFFFFF;
}

#content_left {
position : relative;
width : 361px;
}

#content_center {
position : relative;
left : 396px;
width : 272px;
}

#content_right {
position : relative;
left : 668px;
width : 272px;
margin-left : 37px;
}

[Rob MacKay]

relative positioning works from a starting point of where the element WOULD have been rendered normally. Absolute positioning works from the parent element (if it has a position of at least relative) or defaults to the browser.

For a deeper look I wrote a quick article on it here:

http://alteredaspect.info/the-art-of-css-positioning/

have a quick read and see if it helps :)

[copaesthetic]

Thanks, I know that assigning my contained divs as absolute that it would solve my positioning problem… HOWEVER the #content_left, #content_center, #content_right cannot be absolute because if they were, they would be unable to utilize the background-color rule found in #content

[Rob MacKay]

I don’t understand how absolute positioning effects background colour?

[Author]

Posts