Absolute Columns

[ikthius]

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?

[iopet]

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:

[iopet]

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

[iopet]

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.

#footer

[Author]

Posts