CSS Layout Problem

W

wal

Hi all,

I'm trying to create a normal layout. From top to bottom; the header,
the content then the footer (both the header and footer are fixed-
height - in pixels). What's different about this layout is that the
contents column will be fixed width (also centered) and has a solid
background color. So far so good, no problem, now the problem is that
I want the footer to be sticky (sticky, not fixed position), ie. if
the contents is shorter than the height of the browser window, the
footer will be pushed to the bottom of the browser window but if the
contents is longer it will be displayed normally under the contents
and will only be shown when scrolling to the bottom of the page.

Please see http://www.waleedeissa.com/temp/example.gif to understand
more what I'm trying to do.

How can this be achieved using css, I've been trying for hours but no
use. It's quite easy to achieve without the header but how can it be
done with the header?

For example, this how I would do it without the header:
<html>
<head>
<style type="text/css">
html, body
{
margin: 0px;
padding: 0px;
height: 100%;
}
#container
{
height: 100%;
margin-bottom: -100px;
}
#content
{
height: 100%;
width: 760px;
margin: 0px auto;
}
footer
{
height: 100px;
}
</style>
</head>
<body>
<div id="container">
<div id="content"><div>
<div>
<div id="footer"><div>
</body>
</html>


Any help would be very much appreciated...
 
B

Ben C

Hi all,

I'm trying to create a normal layout. From top to bottom; the header,
the content then the footer (both the header and footer are fixed-
height - in pixels). What's different about this layout is that the
contents column will be fixed width (also centered) and has a solid
background color. So far so good, no problem, now the problem is that
I want the footer to be sticky (sticky, not fixed position), ie. if
the contents is shorter than the height of the browser window, the
footer will be pushed to the bottom of the browser window but if the
contents is longer it will be displayed normally under the contents
and will only be shown when scrolling to the bottom of the page.
Click to expand...

You need min-height for that, but I don't think it works in IE.

[...]
For example, this how I would do it without the header:
<html> [...]
</html>
Click to expand...

Apart from the mistakes, I don't think that gives you the effect you
want-- the footer is always going to be at the bottom of the viewport,
even if the content is longer than the viewport.

You need min-height: 100% on #container, not height: 100%.
 
W

wal

hi ben, thanks for your reply, actually you're right, i was a little
lazy that i wrote the code without bothering checking it on a web
browser (probably because that wasn't the main point, i was just
trying to give an indication how it can be done without a header).
Here's the code for the sticky footer http://ryanfait.com/sticky-footer/,
I tested it before and it worked perfectly, what i was trying to do is
add a fixed header to the formula but hasn't been successful so far ..
I'm thinking about solving the problem using javascript but i really
prefer a css solution, that would be much cleaner...
 
W

wal

hi again, well, i checked your links, i really appreciate your help
but unfortunately this is not what i'm trying to do .. this is what i
meant when i said that the header and footer are fixed height not
fixed in position .. to make it as clear as possible what exactly i'm
trying to achieve is that I want to create a very normal page layout
(scrollable with no fixed parts) the only difference i want to have is
that when the contents section is shorter than the viewport (ie. the
brower window height), i want the contents section to stretch till the
bottom .. i hope it's clearer now... thanks again
 
B

Ben C

hi ben, thanks for your reply, actually you're right, i was a little
lazy that i wrote the code without bothering checking it on a web
browser (probably because that wasn't the main point, i was just
trying to give an indication how it can be done without a header).
Here's the code for the sticky footer http://ryanfait.com/sticky-footer/,
Click to expand...

It seems to be using min-height: 100% with height: auto, with what I'm
guessing is a hack to make IE give you height: 100%.
I tested it before and it worked perfectly, what i was trying to do is
add a fixed header to the formula but hasn't been successful so far ..
I'm thinking about solving the problem using javascript but i really
prefer a css solution, that would be much cleaner...
Click to expand...

Just put the header inside .wrapper, i.e.

<div class="wrapper">
<div class="header">
...
</div>

...

and set .header { height: 4em; }

Or by "fixed" do you mean you want the header not to scroll with the
contents?

In that case use

..header
{
position: fixed;
width: 100%;
height: 4em;
top: 0;
}

and add another <div class="push"></div> after it-- since it won't take
up any space if it's position: fixed.
 
W

wal

hi again ben,

thanks a lof for your reply, well i'm afraid this is still not exactly
what i want .. i might have not explained clearly but let's explain
this in another way, so, first of all forget what i said in all my
previous messages and also ignore IE, we only what this to work on
FireFox.. let's say that we have a page with only one div (760px in
width with a solid color background and centered horizontally),
actually this is very easy, see the code below:

<html>
<head>
<style type="text/css">
html, body
{
height: 100%;
background-color: white;
}
#contents
{
min-height: 100%;
width: 760px;
margin:0px auto;
background-color: red;
}
</style>
</head>
<body>
<div id="contents">Contents go here...</div>
</body>
</html>

The code above will make the div (#contents) stretch to fill the
height of the viewport, correct? Now, what I want exactly is to leave
some vertical space above, let's say 100px and some vertical space
below, let's say 50px (not for a header or a footer, we don't have a
header or footer in this case), so the div should always stretch to
fill the height of the viewport but leaves a margin above and below
(so that that margin is not covered by the background color of the
div).

To even explain further; I'm creating a page with a two background
images, one is repeated horizontally at the top of the page and the
other one repeated horizontally at the bottom of the page, both
background images exceed the margins (or the vertical space) left by
the contents div as explained above. ie. the top background image
covers the top margin of the div and exceeds it, the same for the
bottom image, to make things a little clearer please see that image so
that you understand what i'm trying to do:

http://www.waleedeissa.com/temp/example2.gif

sorry for the long explanation, i know it's a little bit complicated
to explain but i hope it's clear now...
 
B

Ben C

hi again ben,

thanks a lof for your reply, well i'm afraid this is still not exactly
what i want .. i might have not explained clearly but let's explain
this in another way, so, first of all forget what i said in all my
previous messages and also ignore IE, we only what this to work on
FireFox..
Click to expand...

Good, I might be able to help then.
let's say that we have a page with only one div (760px in
width with a solid color background and centered horizontally),
actually this is very easy, see the code below:

<html>
<head>
<style type="text/css">
html, body
{
height: 100%;
background-color: white;
}
#contents
{
min-height: 100%;
width: 760px;
margin:0px auto;
background-color: red;
}
</style>
</head>
<body>
<div id="contents">Contents go here...</div>
</body>
</html>

The code above will make the div (#contents) stretch to fill the
height of the viewport, correct?
Click to expand...

Yes, it should be at least the height of the viewport.
Now, what I want exactly is to leave
some vertical space above, let's say 100px and some vertical space
below, let's say 50px (not for a header or a footer, we don't have a
header or footer in this case), so the div should always stretch to
fill the height of the viewport but leaves a margin above and below
(so that that margin is not covered by the background color of the
div). [...]
http://www.waleedeissa.com/temp/example2.gif

sorry for the long explanation, i know it's a little bit complicated
to explain but i hope it's clear now...
Click to expand...

I think I get it now. This is quite tricky. The problem is that
min-height: 100% is the minimum height of the content area, so it's
difficult to leave gaps at the top and bottom and make the whole lot
take up 100%.

Absolutely positioned boxes are the only things I can think of that can
be located fixed distances from the top and bottom edges of auto-height
containers.

So here's one way to do it, which involves sneaking the background in
behind the contents with z-index.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
html, body
{
height: 100%;
background-color: white;
margin: 0; padding: 0;
}
#contents
{
min-height: 100%;
width: 760px;
margin: 0px auto;
position: relative;
z-index: 0;
}
#background
{
position: absolute;
top: 100px;
bottom: 50px;
left: 0;
right: 0;
background-color: red;
z-index: -1;
}
</style>
</head>
<body>
<div id="contents">
<div id="background"></div>
<div style="height: 100px"></div>
Contents go here...
<div style="height: 50px"></div>
</div>
</body>
</html>
 
W

wal

well, you really seem to be a master with css, i didn't really work
much with relative and absolute positions, your solution worked
perfectly when i first tried it but unfortunately when i changed
"height: 100%;" (for html and body) to "min-height: 100%;" (that was a
mistake in my code sorry for that), the background now only covers the
contents and doesn't stretch to the bottom.

actually i thought of something, i think i'm going to use a background
image hack for this .. actually in my image i was just trying to
explain what i'm trying to do .. the real design is quite similar (not
exact colors of course) but the red part is really white not red, in
other words the content area has a transparent background, so i
decided to add the content area background part to the background
images .. see the images below to understand what i mean:

http://www.waleedeissa.com/temp/example3.gif
http://www.waleedeissa.com/temp/topbg.gif
http://www.waleedeissa.com/temp/bottombg.gif

thanks a lot for everything, i find this css thing very limiting
sometimes, they should've thought about all this problems before
asking us to drop tables and start using css for the layout! also, i
could think that the box model was probably implemented correctly in
ie5 not what we have in the standards!
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Interfering CSS 1
Positioning CSS components 1
Image on header 2
Having difficulty with the layout of these images / video for this web page 2
Working on mobile css menu with plenty of frustration! 2
Align img inside nav tabs section 5
Need assistance finetuning HTML, CSS, Javascript - sticky header issue 3
Help with my responsive home page 2

Members online

Total: 56 (members: 3, guests: 53)
Robots: 366

Forum statistics

Threads
473,995
Messages
2,570,226
Members
46,815
Latest member
treekmostly22

Latest Threads

Top