Page 1 of 3

Simple 2 Column CSS Fixed-Fliud with Header/Nav and Footer?

PostPosted: Sun Oct 26, 2008 5:16 pm
by Ikaros
I'm looking for basic guidelines for this CSS layout using no browser hacks to stay compatible:

    1) 100% full height left column DIV fixed width 256px containing 256x600px non-repeating background image that stays static on screen at all times as entire page scrolls.

    2) Header container DIV against left column full height DIV for centered page logo graphic.

    3) Horizontal Navigation container DIV centered under header DIV.

    4) Fluid right column DIV for the main page content filling rest of horizontal space.

    5) Footer container DIV against left column DIV for centered author credits and link button graphics.


Also, about scrollbars:

Besides them automatically appearing when page content is long, what are your thoughts on forcing a scrollbar space on the right side at all times so page text or content doesn't "jump" when a scrollbar appears or disappears?

PostPosted: Sun Oct 26, 2008 11:53 pm
by Ikaros
I was thinking more about this.

Since my layout is to feature a static left aligned background image, maybe all I need is a simple liquid header/nav/content/footer arrangement with a single column content area padded 256px from the left so text doesn't overlap the background image? And the header/nav/footer DIVs could lave their left edges 256px from the left also?

I wonder if this would be the best approach. Here is a quicky layout illustration I made in Excel:

Image


Ignore the actual colors and red Vista snipping tool screenshot border.

PostPosted: Mon Oct 27, 2008 12:36 am
by agsone
Rather than finessing with the paddings perhaps you can achieve what you want with what is effectively a two column set up - two divs, both floated left. The first will be your fixed column, the second will have your header, content and footer divs stacked up conventionally inside it. You can set the width of the two independantly and have the right fluid if you like (I think if you give the right one a height of 101% you'll have your permanent scrollbar too).

PostPosted: Mon Oct 27, 2008 12:40 am
by Ikaros
Thanks for the suggestion Agsone. It will probably be best with 2 columns. Otherwise I'll have to add some special padding at the top and bottom to make room for the header, nav, and footer.

Image


I'll play with it by Tuesday night or so. I'll be out of town Monday through part of Tuesday going to an Yngwie Malmsteen rock concert in Virginia. My ears will be ringing when I get back into town but I'll have renewed inspiration to make a new layout for the fan tribute page I have about him.

Play Loud!

PostPosted: Mon Oct 27, 2008 11:23 am
by JerryMuelver
This may provide some inspiration for you:
http://www.cssplay.co.uk/layouts/
Check out "Cross Browser Fixed" under "Layouts".

PostPosted: Mon Oct 27, 2008 8:46 pm
by dr john
Try google and css layouts - you should turn up a few million samples to play with.

PostPosted: Tue Oct 28, 2008 8:01 pm
by Ikaros
JerryMuelver wrote:This may provide some inspiration for you:
http://www.cssplay.co.uk/layouts/
Check out "Cross Browser Fixed" under "Layouts".


I'm trying to get away from a frames emulation in CSS. I doke his layouts but them seem a little tricky to adpot for my needs.

PostPosted: Thu Oct 30, 2008 1:22 am
by Ikaros
I'm having trouble with a footer staying at the bottom in my 2 column layout. Its scrolling with the page instead. What is the proper way to do a footer?

PostPosted: Thu Oct 30, 2008 11:54 am
by JerryMuelver
Use "position:absolute" in CSS, with the footer outside any other container. See the source at
http://www.cssplay.co.uk/layouts/fixit.html

PostPosted: Thu Oct 30, 2008 12:08 pm
by Ikaros
I'm using position:absolute in all my DIVs. You guys keep pointing me back to CCS Play frames layouts which is fine if I want to stick with my current CSS frames style emulation, but there are many detractors here saying to move away from that type of page navigation.

So I was attempting to make a regular 2 column CSS full scrolling page with 1st left-side column full height to hold a static non-scrolling image and the 2nd right-side column split into rows for the header/nav/content/footer like this illustration:

Image

PostPosted: Thu Oct 30, 2008 12:46 pm
by agsone
Ikaros wrote:... CSS frames style emulation, but there are many detractors here saying to move away from that type of page navigation.

My, rather limited, understanding is that CSS frames emulation is fine - all the content is intact in sensible blocks on the page being viewed so accessibility is OK. The problems are with the true frames layouts which call information from different places (in a manner different to server-side includes which assembles an intact page) and are useless from a search engine and accessibility viewpoint.

PostPosted: Thu Oct 30, 2008 1:39 pm
by Ikaros
Yes I agree with that. I'm fine with CSS frames emulation myself. The big issue is tricking IE5 and IE6 to see position:fixed as position:absolute without any non-validating hacks.

The original Dynamic Drive CSS frames template that I had based my current stuff on included a quirks mode first line above the doctype declaration for IE6 and below. I removed that to make it validate properly since it worked in IE7 that I use (before I knew better) and later found it doesn't display correctly in older IE's. :(

Maybe I'll re-visit what Stu is doing at CSS Play with his non-quirks mode frames simulation again and see if I can adapt my bad CSS layout to it using the same DIV names I'm using so I don't have to redo my 45 HTML pages to make it all work. But his is using a full width header and footer and my header and footer has a 256px left margin which gave me fits tying to adopt his code example. Then I tried a regular CSS layout and it seems just as frustrating to get things right.

PostPosted: Thu Oct 30, 2008 3:33 pm
by dr john
Okay, here is how to do this.

Make a wrapper div, into which all your other content will go. Let's say make it 950 px wide.
Inside wrapper make the header div - say 800px wide. float it right.
Inside wrapper make the nav div - same width 800px, float it right.
Inside wrapper make the content div - 800px, float right
Inside wrapper make the footer div - 800px wide, float right.

Now add your image, no need to float it. (But see below on how to get it fixed.
Sorted.

If you wish the content centred in all browsers, add this to your css
body {margin:0; padding:0; text-align:center;}
and this to the wrapper's css
wrapper {text-align:left;}

You COULD set the image as the background to the wrapper and set it as fixed top left, and then it wouldn't scroll away, instead of adding it as an image in the wrapper.

PostPosted: Thu Oct 30, 2008 4:47 pm
by charlescooke
Ikaros wrote:The big issue is tricking IE5 and IE6 to see position:fixed as position:absolute without any non-validating hacks.

Well it is an issue but you don't need any hacks - just valid code.
A month ago I wrote a page showing how it is done. You can find it at http://www.charlescooke.me.uk/web/lab_notes/targeting.html

PostPosted: Thu Oct 30, 2008 8:42 pm
by Ikaros
Testing Stu's frames for kicks using Notepad right now. I'm afriad KompoZer might alter the code. I added a nav bar area and moved divs over to be against the left image. I'll redo his DIV paddings later. The temporary colors are for testing only since everything would end up having a black background in the end. Does the CSS frames simulation break in anyone's non-IE7 browser? I'm giving Browsershots a whirl now to to see what the online screenshots look like...

http://home.comcast.net/~yngwie100/yngwie4layout.html