CSS/XHTML - Height Issue

Hi campers,

I have a problem. I'm building a new site using a totally table-less design, using only XHTML & CSS. I've hit a snag - I'm trying to get the main content area (where the copy goes) to have a height of 100% (so that it's backguond color goes all the way down to the bottom of the page). The height attribute looks like it is being ignored. Has anyone else had a problem like this before?

EDIT March 26, 2004 - Site has been moved from dev server to the live server

I'm curious to find out as well... I've run into some sites where they simply pad a bunch of break tags until the body reaches the equivalent height of the rest of the page... I'm sure there has to be a cleaner method.

Hey stumpy,

Try adding a 999px height to your #container and see what happens... it's kind of telling and I think it should help you figure out a solution. (Compare before and after...)

I'm wondering if you should have a separate div for the header?

Sorry I don't have time to dig deeper and give you a silver bullet solution right now.

Hey avit - thanks for your input. I have tried that, and yes, it does work, but, it's not ideal... i.e. What if the site was dynamic, e.g. content was loaded in from a DB.

I've been racking my brain for ages (as has FrankieShakes) over this one, and the only solution we can come up with is to explicitly set the container height (the same as you suggested), which to me feels like a dirty hack. In this case, the site is static, so this solution is feasible, but what about dynamic sites?

As for the header - yeah, it prolly is more "correct" to have it in a separate DIV. Will this have any effect on the height issue though?

P.S. What browser/ver are you using?

I'm using Safari.

Well, you have a white background for #container, which only appears behind the header, and the menu and content appear to "hang" out the bottom of it. They aren't actually "inside" that div, so hacking it right could get difficult. I would rename your #container to #header, and make a second div for your content. Make it the same, but change background: none; margin-top: -20px so it overlaps as you have it now. That way your LHcol and mainbody could actually be contained within their div. See attached file.

I have a hack that sort of works. Also in the attached files. Another way to do this would be with absolute positioning (probably better and easier). Also have a look at the layout demos on http://www.positioniseverything.net/ for more ideas.

Here's the attached file.

It's actually a tgz file (tar-gzip), so rename and use as appropriate.

Ack - Safari. I was hoping you wouldn't say that

btw - positioniseverything.net rocks. Already been through that site with a fine tooth comb.

Yep, that's what it looks like... Strange, I always thought Safari to be on the ball with its CSS rendering. Ignore almost everything I said. I'll have another look at it later if I find the time.

Yeah, that's weird... Usually Safari is on the ball... Is it an older version, avit?

Btw, Stumpy... Where'd you get access to the Mac? NICE!!

Safari probably IS correct - I've mostly likely made some horrible, ugly error!

I'm getting to the point where I'm going to re-write this thing using my beloved tables. It'll be soooo simple.

Tables, yuck
***Shivers at the thought of using tables for design**

The truth is, what ever works for you and your audience is what is best

CHornJr - if you can solve the problem at hand, them maybe I'll agree with you. As yet, no-one from this board can do it. Additionally, I don't really find having to include dozens of hacks in my CSS to get around various browser issues, convenient or enjoyable.

You said it. Might as well be using spacer GIFs and all those rowspan/colspan hacks from HTML 3.2 for all it's worth.

Hacks are not the point of using XHTML and CSS.

There is a min-height property in the CSS2 box model, but it's not widely supported, unfortunately.

Well, I've done it!

It's got a little hack or two in there, but it's working (in IE anyway - I dread to think what it looks like in Safari )

I separated the header from the content. The nav and copy are sitting in a container with the bkg color set to the bkg color that you see under the nav. This way, if the copy is long, the bkg color will stretch.

Conversly, if the copy was short, the nav bkg color would appear underneath copy, so to get around that, I just added some '<br />'s to the copy. I feel so dirty. Anyway, it's done. It went waaay over the time I allocated, but I learned a lot.

Check out the final site

Nice design! Looks good in IE, but slightly different in Mozilla (Firebird).
Just a note about content creeping out of divs.
I've found if you place a "spacer" div (with the property "clear:both;") to break out of the floats, content will then stay inside it's container.

Hi the noodle incident

URL

has probably the most comprehensive box tutorials and examples, this is where I got to grips with the issues being discussed you wont be dissapointed
Cheers Kieran