Welcome to the MacNN Forums.

If this is your first visit, be sure to check out the FAQ by clicking the link above. You may have to register before you can post: click the register link above to proceed. To start viewing messages, select the forum that you want to visit from the selection below.

You are here: MacNN Forums > Software - Troubleshooting and Discussion > Developer Center > CSS: How to make a narrow side column the same height as the main column?

CSS: How to make a narrow side column the same height as the main column?
Thread Tools
xi_hyperon
Addicted to MacNN
Join Date: Jul 2001
Location: Behind the dryer, looking for a matching sock
Status: Offline
Reply With Quote
Apr 20, 2005, 09:36 PM
 
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.
     
ntt
Fresh-Faced Recruit
Join Date: Jul 2003
Location: Seattle, WA
Status: Offline
Reply With Quote
Apr 20, 2005, 09:45 PM
 
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.
http://bestbits.ii.net/ for widgets and more
     
Phil Sherry
Dedicated MacNNer
Join Date: Nov 2004
Location: Stockholm, Sweden
Status: Offline
Reply With Quote
Apr 21, 2005, 12:20 PM
 
You could always use the faux columns technique.
     
Millennium
Clinically Insane
Join Date: Nov 1999
Status: Offline
Reply With Quote
Apr 21, 2005, 12:33 PM
 
Originally Posted by Phil Sherry
You could always use the faux columns technique.
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!
     
xi_hyperon  (op)
Addicted to MacNN
Join Date: Jul 2001
Location: Behind the dryer, looking for a matching sock
Status: Offline
Reply With Quote
Apr 22, 2005, 10:51 AM
 
Thanks guys for your response. I'm going to give the faux columns a try this weekend.
     
xi_hyperon  (op)
Addicted to MacNN
Join Date: Jul 2001
Location: Behind the dryer, looking for a matching sock
Status: Offline
Reply With Quote
May 14, 2005, 08:24 AM
 
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).
     
xi_hyperon  (op)
Addicted to MacNN
Join Date: Jul 2001
Location: Behind the dryer, looking for a matching sock
Status: Offline
Reply With Quote
May 14, 2005, 09:09 AM
 
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.
     
registered_user
Dedicated MacNNer
Join Date: Nov 2001
Location: Are Eye
Status: Offline
Reply With Quote
May 14, 2005, 09:57 AM
 
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.
     
   
Thread Tools
 
Forum Links
Forum Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Top
Privacy Policy
All times are GMT -4. The time now is 08:22 PM.
All contents of these forums © 1995-2017 MacNN. All rights reserved.
Branding + Design: www.gesamtbild.com
vBulletin v.3.8.8 © 2000-2017, Jelsoft Enterprises Ltd.,