Help needed on 100% height problem!

[simon.cannon]

Hello

I am currently working on a project that requires 100% height, and to be honest I am struggling! If you look at the URL I have provided you will see the layout. What I need to achieve is a min height of the main content area of 400px, with the brochure download button in the left column to be fixed to the bottom, thus if more content is added then the brochure download button will always appear at the foot.

http://client.3tcreative.com/csstest/

If anyone could help I would be extremely grateful.

Regards, Simon

[vtjustinb]

If you absolutely need 100% height you're going to have to do some hacking--it's simply not easy to do with current browser support for CSS2.

You can read about strategies and implementations for achieving 100% height here:

http://css-discuss.incutio.com/?page=HundredPercentHeight

[simon.cannon]

Hey vtjustinb

Thanks for taking the time to look at this for me!

[Blue_Jeans]

What? I'm pretty dang sure you can do this in CSS2. It's not much different than attaching a footer to the bottom of the page and then having it stretch with the content of the page.

I'll play around with it and see what I can do.

[vtjustinb]

What? I'm pretty dang sure you can do this in CSS2. It's not much different than attaching a footer to the bottom of the page and then having it stretch with the content of the page.

I'll play around with it and see what I can do.

It's not that you can't do it in CSS2--you definitely can. The point is browser support for the spec is dodgy and getting it to work consistently cross-browser is a royal pain. It mainly has to do with IE's interpretation of width and height as min-width and min-height as it expands block-level divs to accomodate overflow.

[Blue_Jeans]

It's not that you can't do it in CSS2--you definitely can. The point is browser support for the spec is dodgy and getting it to work consistently cross-browser is a royal pain. It mainly has to do with IE's interpretation of width and height as min-width and min-height as it expands block-level divs to accomodate overflow.

I think "getting it to work consistently cross-browser is a royal pain" is a bit... opinionated, don't you?

And as for the browser support... Firefox, IE7, Opera, Safari all support it, and I'm fairly confident that IE6 does as well with a bit of specific coding. Let's see... that covers... oh, about 96/97% of the market share. I'd say it is a job well done, eh?

@simon.cannon:
I'm still trying to tidy up your enormous stylesheet. I've manage to reduce it by 2kb simply by taking out whitespace and simplifying styles.

I keep looking at your code and thinking... "Why the heck is he supporting IE5 on a friggen Mac?" It's about 2% of the Mac market share, not as a market share as a whole. That sticks it somewhere at about .5% of your viewers at the max. Unless the website is targeting those users specifically, why are you wasting all that markup? You don't need to support it.

I'll see what I can get done on your site, mate.

[vtjustinb]

I think "getting it to work consistently cross-browser is a royal pain" is a bit... opinionated, don't you?

I think all designers have an opinion about IE6's support for the CSS standard. :P

And as for the browser support... Firefox, IE7, Opera, Safari all support it, and I'm fairly confident that IE6 does as well with a bit of specific coding. Let's see... that covers... oh, 98% of the market share. I'd say it is a job well done, eh?

I'm still not quite sure where you're going with your replies. At no point have I said that it can't be done, only that if you want an accessible design (which unfortunately still includes IE6) you'll have to hack around the CSS a bit.

I also caveat this issue because about 80% of the time people that think they need 100% height on something don't, and reworking the design can result favorably in both the semantics of the css and the unnecessary markup used.

[Apostropartheid]

Humans are amazing at misinterpreting language (I think it's about 75% of people misjudge what tone of voice is used.) I don't think he was trying to be condesending, although it looks like it a bit.

Either way, let's get this issue solved, guys. Play nice.

[Blue_Jeans]

Sheesh, I was being nice. I think you misunderstood my casual tone for a condescending one. "Oh, eh, ellipsis(...)" are all casual language...

Anyways, I'm nearly finished with this.

[vtjustinb]

Agreed.

Really you have a few options here simon:

1.) Place the brochure button at the bottom of the content div itself, and then shift it into the side column with relative positioning - You'll have to apply a negative bottom margin to the content div to account for the space left by the brochure in normal flow, but this would let you not have to worry about the height of the sidebar and ensure the brochure was always beside the bottom of the content.

There are a few downsides to this method, one being that you'll have to fauxcolumn the sidebar to make sure it extends all the way to the footer, and if your content is so short that it doesn't go past the normal sidebar content the brochure button could potentially overlap.

2.) Use javascript to keep the brochure div at the bottom of the sidebar - This wouldn't be a very involved script, and support for DOM scripting is pretty good across the normal gamut of browsers (IE6/IE7/Gecko/Webkit), and you could just dump it on the window onload.

Of course if the user has javascript disabled it would probably just degrate to being at the bottom of the sidebar, not the content--and there's a maintenance issue with involving javascript in the layout.

3.) Try to finagle the columns to be the same height - As I mentioned in most of my posts in a perfect world this would be the best and simplest approach, but browser support for equal-height divs is hard to achieve consistently.

You can read about this issue extensively (wow they realy go in depth with this stuff) here: http://www.positioniseverything.net/articles/onetruelayout/equalheight

Your mileage may vary depending on how firm you see this as a design requirement.

[vtjustinb]

If you want an example of the relative positioning option I made a quick mockup here:

http://just-in.org/etc/brochure.html

[Blue_Jeans]

I made a mockup as well, but he has conflicting things in his design, and I haven't quite sorted them all out.

[vtjustinb]

I made a mockup as well, but he has conflicting things in his design, and I haven't quite sorted them all out.

Yeah at this stage in the design it might be good to strip some things out and make sure you're going at everything cleanly. Like Blue_Jeans said there's a lot of conflicting code in there, probably just trying different things to figure out what will work, that could be trimmed down and make your life easier down the road.

[Blue_Jeans]

Well, I couldn't do it with your current structure. So instead of restructuring the whole thing, I just moved the the brochuredownload to a new place. I used a method similar to vtjustinb's, simply because I didn't want to restructure the whole thing. It's your website, not mine, mate. I cleaned up your css and html just a smidge, but not much. You will want to clean it up some more, and possibly move everything related to PropertyFinder and CompareResults to a separate css style. Your stylesheet is enormous, splitting it up would certainly help you out. I really don't think you need as much css as you have to get what you want, but it is your site, so it's your choice.

I've attached the html and css as a zip. Good luck, mate.

I hope he didn't take vtjustinb's first reply as a 'don't come back here because we can't do it, sorry'... The way simon worded his second post makes me think he's not coming back... and as usual, he didn't leave contact info...