Looking for CSS Example, or Explanation of Layout Below

Question

I've been learning CSS for a while now, but the simplified layout below is still a little beyond me, so I am asking whether anyone knows of a model for such a layout, or would have an explanation to make this work.

The page should have 3 bands or blocks:

header, bottom, and content.

The 'header' would start at left 0, top 0 in the visible screen, go all the way to the right edge, and be 70 px in height.

The 'bottom' band would start at left 0, but at the bottom of the visible screen, and also be 70px in height (eg start at the bottom of the visible screen minus 70px). It would extend all the way to the right edge of the visible screen.

The 'content' band would start at left 0, the top would start at the bottom of the 'header' band, and the bottom of the content block would extend down as far as the top of the 'bottom' band.

It would also be nice if the 'header' and 'bottom' band were fixed in their places, but the 'content' block were scrollable if there were more content that space in the block.

I think it's doable, but I can only get this so far at my current level, so I'd like to see how an expert would do it.

Many thanks Mike Thomas

Answer 1

Fixed headers at the bottom of pages are difficult to implement and maintain. Can you guarantee that your content will always fit? Scrolling just a block instead of the entire page can be tedious for users because you have to get the focus right before using page-up and page-down.

Better solution would be to let the footer naturally go after the content is finished. You can set a min-height on the content for pages with out much content.

Sorry not a real answer, but your site will be better this way.

Answer 2

here is a great site i have come across concerning css

CSS tips and tutorials

i think it would be best to just follow some basic designs there and learn from there :-)

Answer 3

I'm not sure if this solves it, but for fixed header and footer with a scrolling middle content section you can check this link out:

http://www.cssplay.co.uk/layouts/basics2.html

Answer 4

What you want is a sticky footer. As for the content, you'll need to implement a scrollable DIV - the key there is handling overflow.

Answer 5

CSS Frames

This example covers the headers and footers that stay fixed at the top and bottom, although the width is less than 100%. I'm sure you can adjust.

By the way, the way I found this was by searching for "CSS frames" - keeping one part of the content stationary while the rest scrolls is sometimes referred to that way, because it's similar to what people used to do with HTML frames.

Answer 6

Examples - Css List Properties / Examples - Css Layer Properties / Examples - Css TextBox Properties / Examples - Css Font Properties / Examples - Css Text Properties / Examples - Css Cursor Properties / Examples - Css Background Properties / Examples - Css Table Properties / Examples - Css Scroll Bar Properties / Examples - Tools - Units - Parameters - Template Page - Web Design

http://www.css-lessons.ucoz.com/

Answer 7

Blueprint CSS is a nice tool that simplifies making CSS layouts.