Grow your CSS skills. Land your dream job.

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 http://www.knowingthrives.com/wip.html

    It renders correctly in Firefox, however in Safari (and maybe others? haven’t checked yet) it appears like this http://www.knowingthrives.com/help.jpg 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.

    Screenshot: http://onederangedneko.com/stuff/csstricks-1.jpg

    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.

*May or may not contain any actual "CSS" or "Tricks".