How does the CSS of the sidebar work?

December 04, 2003 | Comments Closed

Summary: How did you get the nav on the right side to extend all the way down on every page rather than just stopping when the content (of the right side) did?

From Clint

Well it doesn’t really, and in many ways my template isn’t ideal. I’ll explain what is going on, as best as I can remember, but realize that if I could easily redo all my templates I’d do this differently.

I’d use floats instead of positioning.

The gray bar you see as part of the right sidebar is really part of of a “wrapper” DIV. So what is actually determining how long that sidebar appears is the actual content of the page.

I’ve got two DIVs contained within that “wrapper” — one is the content, which has a white background, and the other is an absolutely positioned DIV that contains the text and links of the right sidebar. That sidebar DIV is positioned in the top right corner of the “wrapper” DIV.

The content DIV is what pushes the “wrapper” DIV open. Usually the content is longer than the sidebar so it looks ok. On various pages I use pretty ugly hacks, like empty DIVs with padding, to “prop” it open. When I built the site I didn’t realize that this would ever become an issue, but it has.

I’d fix it but it comes down to practicality. It is much easier to implement a hack than to rebuild all the templates that run this site as well as the stylesheet. At some point I may do that, or I might wait until I decide to redesign.

For the moment, and since the core of my site is template based, I can live with the hacks.

This issue, in my opinion, is the single largest problem with CSS based design at this point in time.

Filed under: FAQs