Grow your CSS skills. Land your dream job.

Absolute Columns

  • # December 24, 2008 at 11:10 am

    Regarding the recent post in Chris’ blog about Absolute Columns http://css-tricks.com/links-of-interest-60/ I noticed that this seemed, on the surface, really good.

    However, after using the code and then testing others this only seems to work when the right hand column is the one that is absolute to grow.

    OK I thought, what if I just change the code so that the left grows if more info is in the right column, so changing the relevant code, it does not work.

    so going back to basics I tried everything to get the left hand side as a navigation sidebar that grows if there is more content in the right hand side, but no matter what I try this cannot be done the way the tutorial is suggesting other than the way they suggest.

    I tried absolute positioning for both, left or right, it goes haywire. Relative for all, it does not work.

    so really not sure if I was using the code right, but trying everything I could think of, this seems to be eluding me.

    has anyone else tried this and got it to work?

    # December 24, 2008 at 12:05 pm

    Find the "/* EXAMPLE STYLES */" heading, replace with:

    Code:
    /* EXAMPLE STYLES */
    #container {position:relative}
    #column-right {float:right; width:480px}
    #column-left {position:absolute; top:10px; bottom:10px; left:10px; width:250px; overflow:auto}
    div.clear-right {clear:right; margin:0; padding:0}

    Then add:

    Code:

    before

    Code:

    # December 25, 2008 at 3:54 am

    cheers Iopet, I will try this over the next few days

    # December 26, 2008 at 1:19 pm

    I noticed that this piece of code works better for some reason.

    Code:

    # December 26, 2008 at 3:54 pm

    How does it work better? The ‘clear’ attribute is deprecated, by the way

    # December 26, 2008 at 6:09 pm

    I’d not taken a look in IE7, and it looks like it needs the "zoom: 1" declaration too, so change

    Code:

    #left

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    #right

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


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

You must be logged in to reply to this topic.

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