The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

3 row layout extending the content div

  • # September 19, 2009 at 7:39 pm

    First time posting on the forum, have been following the articles etc for a little while though. I seem to have hit a brick wall as far as my knowledge goes.

    Here is the draft I have created for a site

    It renders correctly in Firefox, however in Safari (and maybe others? haven’t checked yet) it appears like this You should see my little annotation at the bottom there.

    Basically I want the container to be 100% height, the header and footer will be fixed heights and should sit on the top, and bottom of the browser respectively. The middle content box should expand to fill the whole page regardless if there is blank space.

    I’ll be grateful for any help that is provided, I’m quite rusty at web design, haven’t delved into it for quite a while.

    # September 19, 2009 at 10:41 pm

    Just a note. It’s also not correct in Firefox when I allow my browser window to take up the full screen (1920×1080) and get the same thing as XGFX’s Safari render. So it’s not limited to JUST being a Safari issue.


    Edit: thought I had a fix, but it caused more weirdness.

    # September 20, 2009 at 10:12 am

    I’ve checked it out with IE6 and IE8 and renders correctly, at least at the same resolution I rendered the Firefox one at. However Chrome and Safari don’t want to play ball. I can’t see any glaring mistakes that I’ve made, but my method may be a bit messy? Not sure.

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed