|
|
CSS: How to make a narrow side column the same height as the main column?
|
|
|
|
Addicted to MacNN
Join Date: Jul 2001
Location: Behind the dryer, looking for a matching sock
Status:
Offline
|
|
This is probably a question only a newbie would ask, but I've searched and not found a solution so far.
I'm creating a fixed-width site using CSS, which contains a header, a main column for text, a narrower right-side column for navigation links, and a footer. Simple enough.
The question I have is, how do I set up the right-side column to always be the same height as the main column (in other words, to stretch from the header to the footer like main column)? So far, all the examples I've found show the narrower column to be shorter than the main column.
Any help or suggestions would be greatly appreciated.
|
|
|
|
|
|
|
|
|
Fresh-Faced Recruit
Join Date: Jul 2003
Location: Seattle, WA
Status:
Offline
|
|
The trick that I've used before is to enclose both columns in another div that has the same background as the right-hand column, set to anchor to the right hand side and repeat vertically only. That way, even though the right-hand column may stop short, you can't tell.
Evil, but effective.
|
|
|
|
|
|
|
|
|
Dedicated MacNNer
Join Date: Nov 2004
Location: Stockholm, Sweden
Status:
Offline
|
|
|
|
|
|
|
|
|
|
|
Clinically Insane
Join Date: Nov 1999
Status:
Offline
|
|
Originally Posted by Phil Sherry
That's what ntt suggested.
Unfortunately, Hyperion, you've stumbled upon the one real weakness of CSS: it's not really possible to do this directly. Everyone has been burned by this at one point or another.
You have four options at this point: cheat with fake columns (as ntt and Phil suggest), live with the columns not always being the same height, redo your design such that the data isn't arranged in columns, or use a single table to define the two columns.
All of these methods have their disadvantages. Pseudocolumns only work if you know that one column will always be longer than the others (otherwise, an unexpectedly-long column will be cut off). Although most design concepts can be adapted to work with uneven columns, this involves some amount of pain. Redoing the design completely involves even more pain. Layout tables are nonsemantic, though the accessibility penalty for a single layout table is not large.
In the end, it's really your call what to do.
|
You are in Soviet Russia. It is dark. Grue is likely to be eaten by YOU!
|
|
|
|
|
|
|
|
Addicted to MacNN
Join Date: Jul 2001
Location: Behind the dryer, looking for a matching sock
Status:
Offline
|
|
Thanks guys for your response. I'm going to give the faux columns a try this weekend.
|
|
|
|
|
|
|
|
|
Addicted to MacNN
Join Date: Jul 2001
Location: Behind the dryer, looking for a matching sock
Status:
Offline
|
|
Just put together a test page using the faux columns approach, which you can see here. Don't mind the colors, this is just some basic testing of my css skills (or lack thereof).
I don't have a PC handy, so I have no clue at the moment how this looks in IE for Windows (I'm sure there are problems). I do know it looks fine for Safari and Firefox (Mac), but is completely fubared in IE5.2/Mac (See screenshots). Does anyone know what's causing such nastiness in IE/Mac? Not that I care too much, but it's a matter of wanting to learn what causes this, if it is resolvable, and through what type of hacks it can be resolved.
Any help or suggestions would be, as always, greatly appreciated.
Safari
IE/Mac (Yuk!)
Note how IE/Mac is rendering the top nav bar (vertical instead horizontal).
|
|
|
|
|
|
|
|
|
Addicted to MacNN
Join Date: Jul 2001
Location: Behind the dryer, looking for a matching sock
Status:
Offline
|
|
Since my last post, I've figured out at least part of the problem with IE/Mac - I needed to float left the navbar links.
But there is is still weirdness going on - see screenshot below. Any idea why the main text is flowing the way it is?
IE/Mac
Top paragraph in the main content block is flowing much wider than the paragraphs below it.
|
|
|
|
|
|
|
|
|
Dedicated MacNNer
Join Date: Nov 2001
Location: Are Eye
Status:
Offline
|
|
Sometimes IE can be fussy with margin and padding. That is, on a layout like this margin-right might not work, but padding-right would. I don't know what the route of that one is.
My suggestion, to figure out what that page is doing is to use CSS to set background colors or borders on your divs and such. That way you'll be able to see where your elements are and if something is interfering with text flow.
For temporary debugging, I've been known to write CSS rules like:
div, p, ul, li { border: 1px solid pink; }
bear in mind that using a border does affect layout because it adds width, but the difference is minimal and makes it easy to see what's under what.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Forum Rules
|
|
|
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
|
HTML code is Off
|
|
|
|
|
|
|
|
|
|
|
|