Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Absolute Columns

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #23825
    ikthius
    Member

    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?

    #52377
    iopet
    Member

    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:

    #52403
    iopet
    Member

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

    #52406
    iopet
    Member

    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 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.