6 replies [Last post]
Larzu
Offline
newbie
Last seen: 14 years 24 weeks ago
Joined: 2006-06-12
Posts: 2
Points: 0

I've been looking at some different hacks and tips, and none seem to work for my problem..

I've got 3 columns, all 100% height..
leftBar, mainBar, rightBar..

On top of rightBar theres is some pictures overlapping into mainBar...

The problem is that if the pictures exceed the viewport, the columns only have the height of the viewport, which leaves som space blank when you scroll down..

Has anyone battled a similar problem??

Tell me if you need more info.. Need info quick, on a deadline Smile

Hope you can help!

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 10 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

3 column design prob..

Is it a problem in IE?

In other browsers, height:100%, means 100% of the view port. Anything more follows overflow rules. It sounds like for these browser you don't want height:100%, but min-height:100%.

IE treats height like min-height when overflow setting is the default, so it should be ok.

Larzu
Offline
newbie
Last seen: 14 years 24 weeks ago
Joined: 2006-06-12
Posts: 2
Points: 0

3 column design prob..

i found a fix.. had to go on a compromise with my design though.. but it works..

it involves using * html to get height right in IE and firefox..

* html #mainColumn { /* Only IE sees this */
height:100%;
}

#mainColumn {
min-height:100%;
}

IE treats height as other browser treat min-height, and doesnt recognize min-height at all...

In this way both get what they want Smile

Stupid browsers! Tongue

Thank you Chris, for youre interest.

/Lars

min_max9000
Offline
newbie
Canada
Last seen: 13 years 42 weeks ago
Canada
Joined: 2006-06-13
Posts: 9
Points: 0

3 column design prob..

Add this, and go from there:
body {height: 100%;}

Lorraine
Lorraine's picture
Offline
Elder
UK
Last seen: 14 years 15 weeks ago
UK
Timezone: GMT+1
Joined: 2005-01-04
Posts: 1001
Points: 0

3 column design prob..

Larzu wrote:
i found a fix.. had to go on a compromise with my design though.. but it works..

it involves using * html to get height right in IE and firefox..

* html #mainColumn { /* Only IE sees this */
height:100%;
}

#mainColumn {
min-height:100%;
}

IE treats height as other browser treat min-height, and doesnt recognize min-height at all...

In this way both get what they want Smile

Stupid browsers! Tongue

Thank you Chris, for youre interest.

/Lars
The * html hack isn't going to be around forever and it's best to use as few hacks as possible from here on in. There is another way:

#mainColumn {
   height: 100% /*** IE understands this and so do the rest  ***/
   min-height:100%; /*** IE ignores this (no probs) but the others act on it and, because it is the final height, that's the one they use ***/
}

But do take note of what Chris...S said about overflow Wink

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 10 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

3 column design prob..

Lorraine, that won't work. It'll fix the height in compliant browsers to 100% as min-height: 100% will be satisfied. Some form of targetting IE is necessary. The * hack should be fine, as the problem is only with IE6 and earlier and the * hack only works on those browsers. ie., this isn't a problem for IE7 and the * hack is ignored by IE7.

For all that, a better solution is to use IE's conditional comments to include the height:100% for IE LTE 6.

Lorraine
Lorraine's picture
Offline
Elder
UK
Last seen: 14 years 15 weeks ago
UK
Timezone: GMT+1
Joined: 2005-01-04
Posts: 1001
Points: 0

3 column design prob..

I stand corrected. Thank you.