Grow your CSS skills. Land your dream job.

CSS relative positioning

  • # June 1, 2010 at 4:50 pm

    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
    # June 1, 2010 at 5:20 pm

    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 :)

    # June 1, 2010 at 7:25 pm

    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
    # June 2, 2010 at 3:52 am

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

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".