Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > CSS Layout Problem

Reply
Thread Tools

CSS Layout Problem

 
 
wal
Guest
Posts: n/a
 
      12-11-2007
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...
 
Reply With Quote
 
 
 
 
Ben C
Guest
Posts: n/a
 
      12-11-2007
On 2007-12-11, wal <(E-Mail Removed)> wrote:
> 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.


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>


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%.
 
Reply With Quote
 
 
 
 
wal
Guest
Posts: n/a
 
      12-12-2007
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...
 
Reply With Quote
 
wal
Guest
Posts: n/a
 
      12-12-2007
Hi, well beside the sticky footer by Ryan Fait (brilliant I'd say), I
also found this page http://www.xs4all.nl/~peterned/examples/csslayout1.html
... it's a little close to what I want but it's still not exactly what
I want to do...
 
Reply With Quote
 
wal
Guest
Posts: n/a
 
      12-12-2007
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
 
Reply With Quote
 
wal
Guest
Posts: n/a
 
      12-12-2007
oops, sorry, i replied to the wrong person...
 
Reply With Quote
 
Jonathan N. Little
Guest
Posts: n/a
 
      12-12-2007
wal wrote:
> oops, sorry, i replied to the wrong person...


You didn't reply to anyone. learn to quote on Usenet


http://www.google.com/search?hl=en&q...=Google+Search
proper quoting on usenet - Google Search

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
 
Reply With Quote
 
Ben C
Guest
Posts: n/a
 
      12-12-2007
On 2007-12-12, wal <(E-Mail Removed)> wrote:
> 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/,


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...


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.
 
Reply With Quote
 
wal
Guest
Posts: n/a
 
      12-13-2007
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...
 
Reply With Quote
 
Ben C
Guest
Posts: n/a
 
      12-13-2007
On 2007-12-13, wal <(E-Mail Removed)> wrote:
> 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..


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?


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...


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>
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
CSS: a simple layout won't work in CSS liketofindoutwhy@gmail.com HTML 29 03-21-2008 03:46 PM
Css-Layout vs Table-Layout Habib HTML 15 06-20-2006 05:11 AM
Choosing Layout: Css-Layout or Table-Layout hpourfard@gmail.com ASP .Net 1 06-19-2006 10:06 AM
Table-based layout to CSS layout Guybrush Threepwood HTML 20 06-11-2006 11:12 AM
CSS Layout question - how to duplicate a table layout with CSS Eric ASP .Net 4 12-24-2004 04:54 PM



Advertisments