38 replies [Last post]
burlster
burlster's picture
Offline
Leader
Bournemouth
Last seen: 2 years 21 weeks ago
Bournemouth
Timezone: GMT+1
Joined: 2007-05-31
Posts: 693
Points: 45

Hello!

I thought I would try one last time because I finally got the wording of my problem sorted and a test page up.

Would anyone happen to know how I might be able to make the bottom red box stretch to meet the footer (bar a 1 pixel gap)? It's a sticky footer.

http://fiat.mailstat.co.uk/JohnCSS/index.html

Here's my original thread (I'm reposting because I wanted to be more precise with my question and hopefully inspire some of you Gurus to take a ganders). In the original thread Titan793 helped with a JavaScript solution which is great but a nagging voice wants me to believe there's an easier solution?

http://csscreator.com/node/34516

Thank you muchly! Any advice is greatly appreciated...

J

Have YOU said Hello yet?
The CSSCreator Hello Thread

Titan793
Offline
Enthusiast
Syracuse, NY
Last seen: 9 years 14 weeks ago
Syracuse, NY
Timezone: GMT-5
Joined: 2009-02-20
Posts: 285
Points: 5

I would think there "should

I would think there "should be" an easier solution.. but I'm unable to find it at this point. Assuming you failed to come up with anything this weekend as well? I was playing around with the javascript options, and while I think it's possible, the functions to get the page size don't reload if someone changes their browser window size.. which would throw the dimensions off at times.

I kept trying to utilize the 100% height as well with no luck. Either it shrinks the div to 100% of the inner text height, or it stretches too long, and it ends up the dimensions of 100% of the browser window height.. instead of 100% filling up the remaining portion of the page.

Good luck with this.. this sure is a "tricky" problem! Sad

burlster
burlster's picture
Offline
Leader
Bournemouth
Last seen: 2 years 21 weeks ago
Bournemouth
Timezone: GMT+1
Joined: 2007-05-31
Posts: 693
Points: 45

Crazy Problem

Yeah Titan, I'll actually just e-mail the client with alternative suggestions and say it's not possible. I'm quite proud to have stumped the gurus though Wink

By the way all, I should state that I posted the same question on WLC. Sorry guys, hope that's not considered rude, I just got so frustrated with this problem!

Thanks,

John

Have YOU said Hello yet?
The CSSCreator Hello Thread

Titan793
Offline
Enthusiast
Syracuse, NY
Last seen: 9 years 14 weeks ago
Syracuse, NY
Timezone: GMT-5
Joined: 2009-02-20
Posts: 285
Points: 5

I think why this is so

I think why this is so difficult is because if it were possible, the "faux column" and "sticky footer" tricks wouldn't be needed anymore lol. You are dealing with something that would require you to basically come up with a new method for things.. I'm sure other people have tried this as well.

Aside from some crazy javascript or something, I just don't think this is very possible currently.. unless you went back to a table layout.

Good luck if you keep working on this! If you (or anyone) comes up with something, post and let us (me) know!

burlster
burlster's picture
Offline
Leader
Bournemouth
Last seen: 2 years 21 weeks ago
Bournemouth
Timezone: GMT+1
Joined: 2007-05-31
Posts: 693
Points: 45

Hey, so does that mean you

Hey, so does that mean you would be able to accomplish this with Tables? Is there any chance I could steal dirty limbs from a dead table and frankenstien them on to my CSS design for success?

What do you reckon? Smile

Have YOU said Hello yet?
The CSSCreator Hello Thread

downtap
downtap's picture
Offline
Enthusiast
Dallas, TX
Last seen: 5 years 6 weeks ago
Dallas, TX
Timezone: GMT-7
Joined: 2008-01-18
Posts: 227
Points: 36

You know burlster, I think

You know burlster, I think this is entirely possible. Let's put our heads together. Maybe I should read through your previous post first, but are you just wanting that bottom red div to extend to the footer, with a 1 pixel gap in between?

Kelon
Offline
Regular
UK
Last seen: 10 years 50 weeks ago
UK
Joined: 2008-12-22
Posts: 17
Points: 0

Oh... not sure if I should

Oh... not sure if I should as this has clearly been going on a while and frustration levels are likely to be high... and I'm a custard coward... but... is this what you mean? Can you see the cheat... er, creative thinking?

Amend: It's one approach, you've got me thinking now.... I think I can do better and deal with the 'cheat'., er be even more creative.

AttachmentSize
like-so.jpg 33.3 KB
burlster
burlster's picture
Offline
Leader
Bournemouth
Last seen: 2 years 21 weeks ago
Bournemouth
Timezone: GMT+1
Joined: 2007-05-31
Posts: 693
Points: 45

Cheating's good

Downtap, thanks for the interest! It is an intriguing question huh... and yeah, all the way to the bottom with a 1 pixel gap but of course without knowing the height is precisely what I am after! You seem to understand what I am after so don't worry about the previous post, that's mainly me going off on one trying to figure out what I want, hence the new thread. Wink

Kelon, your image is also precisely what I want! What's the cheat you mention? It looks like it works but as a JPG, I can't see how you accomplished it. And yeah, I'm willing to get dirty on this one because I want it so much. So yeah, on this occassion I'm happy with any tricks or cheats Smile

Have YOU said Hello yet?
The CSSCreator Hello Thread

Titan793
Offline
Enthusiast
Syracuse, NY
Last seen: 9 years 14 weeks ago
Syracuse, NY
Timezone: GMT-5
Joined: 2009-02-20
Posts: 285
Points: 5

I've made a decent amount of

I've made a decent amount of table based layouts in my day.. let me play with a couple things, but I'm fairly certain it's possible.

I have some code that's almost done right now that might work.. it's rough, but it might be an idea we can work with.

Kelon
Offline
Regular
UK
Last seen: 10 years 50 weeks ago
UK
Joined: 2008-12-22
Posts: 17
Points: 0

Hi Burlster Titan793's been

Hi Burlster
Titan793's been giving you some serious support here, seems to me, credit where it's due, so I'm loathe to waltz in like I know anything. Titan's saying it feels it's pretty much done as far as I can tell, so if Titan can give you exactly (no cheats) what you're after, then I'm ready with the applause and the floor's Titans. I don't mean to be coy... I'd also like to give this a few moments to play with a couple of hunches so I can explain properly... I'll share all, no worries. Won't be long....

Erm, one thing (silly Q perhaps): why 1px... why not 10px so you can see the image?

burlster
burlster's picture
Offline
Leader
Bournemouth
Last seen: 2 years 21 weeks ago
Bournemouth
Timezone: GMT+1
Joined: 2007-05-31
Posts: 693
Points: 45

Thanks!

Titan has been brilliant, and it is very much appreciated! Sorry if that hasn't come across, I really am very grateful for everyone's help, I love that this is intriguing you all as well!! So far in fact, Titan is holding the crown for best idea thus far with the JavaScript but I think we're both still kind of hoping it'll be possible without this, right Titan Wink

And this is a forum which by definition means we can all discuss openly the solution to this little conundrum. It's quite exciting actually, or do I just need to get out more? Haha...

Just to re-iterate, I'm grateful to all of you and if we do find a solution, no doubt it'll benefit us all in the future Smile

J

Have YOU said Hello yet?
The CSSCreator Hello Thread

Titan793
Offline
Enthusiast
Syracuse, NY
Last seen: 9 years 14 weeks ago
Syracuse, NY
Timezone: GMT-5
Joined: 2009-02-20
Posts: 285
Points: 5

Haha.. no need to give any

Haha.. no need to give any credit until we solve this thing! Wink

I still think that the most accurate way to do this probably uses a lot of javascrip onload functions to find and set various heights.. but I definitely would like to find a way that does not require any of that lol.

I love trying to solve things like this.. especially when it's "by any means necessary" .. gives you more freedom to play around.

I thought I had it solved actually.. however, there is a small issue with the method I used. A couple really:

1) Needs to be doctype transitional (looking into making it work strict) right now.

2) The page get's extended too far (by however much is above the final div.. which could look horrible if there is too much content.

I swear I knew a way to do this with tables, but it's been a while since I've used them even, and I'm having trouble remembering if I really did have some magical method, or if I just made that up lol.

The more ideas the better the way I see it.. I just happen to have enough free time at my job (usually) to look things up, and toss ideas at this thread with reckless abandon!

burlster
burlster's picture
Offline
Leader
Bournemouth
Last seen: 2 years 21 weeks ago
Bournemouth
Timezone: GMT+1
Joined: 2007-05-31
Posts: 693
Points: 45

Titan, The site I'm

Titan,

The site I'm actually trying to do this for uses a transitional doctype anyhow so that's not a problem. I used a strict doctype page because it seems to go down better in this forum Smile. However, the extra height could be a problem. In an ideal world, the sticky footer will work as it does now.

I was wondering about the properly height (height: 100%) because it's supposed to work if the parent element is declared right? So theoretically, could we declare the height all the way back to the body tag on all divs so it's inherited correctly? See if there was any extra space at the bottom owing to the way the sticky footer works, the black could be done with a gif with a transparent part aligned to the bottom so it gave the illusion of ending... see, my mind has been racing too, haha! At least we know the height of the footer, that's what I'm thinking Smile

J

Have YOU said Hello yet?
The CSSCreator Hello Thread

Titan793
Offline
Enthusiast
Syracuse, NY
Last seen: 9 years 14 weeks ago
Syracuse, NY
Timezone: GMT-5
Joined: 2009-02-20
Posts: 285
Points: 5

I've played around with

I've played around with every "height: 100%" method that I've been able to think of (for this problem, and various websites of my own).

I came up with a way to solve this.. but I don't think that you'll want to do it.. Basically, we flash back to the 90s, and absolutely disregard the basic foundations of the current way to develop a website lol. So again, not sure if you'll want to use this method.. however, I checked it in IE7 and FF.. both work fine.. and I'm fairly sure that any browser will since I went "old school" on this one.

I'm sure some of the table layout could be replaced with divs, but I just wanted to see if I could get this to work. In theory my idea "should" have worked, but it wasn't.. and then I came up with the idea (If you're ok with table layout, this is the part that you might not like) of removing the doctype totally.

This warps us back in time, but it works.. so that's up to you..

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<html>
<head>
  <title></title>
</head>
<body style="margin: 0px; padding: 0px;">
 
<table width="800" height="100%" border="0" cellspacing="0" cellpadding="0" align="center">
 
<!-- The Header -->
<tr><td height="115" bgcolor="#aa0aa"><p align="center">Header goes here.</p></td></tr>
 
<!-- The Navigation Menu -->
<tr><td height="35" bgcolor="#cc33cc"><p align="center">Navigation Menu</p></td></tr>
 
<!-- The Content Area -->
<tr height="100%" valign="top">
	<td>
		<table width="800" height="100%" border="0" cellspacing="0" cellpadding="0">
			<tr valign="top"><td height="5"></td></tr> <!-- 5px spacer to allow bg to show through -->
			<tr valign="top">
				<td bgcolor="#aaaaaa" height="25">Testing this content.</td>
			</tr>
			<tr valign="top"><td height="5"></td></tr> <!-- 5px spacer to allow bg to show through -->
			<tr valign="top">
				<td bgcolor="#cccccc" height="25">Testing this content.</td>
			</tr>
			<tr valign="top"><td height="5"></td></tr> <!-- 5px spacer to allow bg to show through -->
			<tr valign="top">
				<td bgcolor="#bbbbbb" height="100%">Testing this content to stretch as long as needed.</td>
			</tr>
			<tr valign="top"><td height="5"></td></tr> <!-- 5px spacer to allow bg to show through -->
		</table>
	</td>
</tr>
 
<!-- The Footer -->
<tr>
	<td height="50" bgcolor="#aa0aa"><p align="center">Footer goes here.</p></td>
</tr>
 
</table>
</body>
</html>

Again, this is definitely not the best method.. but it works.

This thing screwed up the formatting, and my perfectly laid out code is ugly now.. I uploaded it to one of my websites. Use the following link to take a look:

http://www.bdeanstudio.com/test/oldschool.html

EDIT:
I guess it isn't as messed up as I thought.. either way, that link shows it working.

Titan793
Offline
Enthusiast
Syracuse, NY
Last seen: 9 years 14 weeks ago
Syracuse, NY
Timezone: GMT-5
Joined: 2009-02-20
Posts: 285
Points: 5

burlster wrote:I was

burlster wrote:

I was wondering about the properly height (height: 100%) because it's supposed to work if the parent element is declared right? So theoretically, could we declare the height all the way back to the body tag on all divs so it's inherited correctly?

When working on a newer website of mine, I pretty much tried this. I was having issues as I recall with the height of the divs setting themselves as the page height.. so even a div that was only supposed to be stretched to fill the remaining space, would end up the height of the browser window, causing scrollbars with a ton of empty space.

I'm fairly certain that was one of the many issues that I had encountered. I ended up giving up (gave up on the footerstickALT method too), changed my design to have a more finished looking footer to just float wherever the content ended, and called it a day.

I had ripped out so much of my hair by that point, that I couldn't afford to lose much more lol.

downtap
downtap's picture
Offline
Enthusiast
Dallas, TX
Last seen: 5 years 6 weeks ago
Dallas, TX
Timezone: GMT-7
Joined: 2008-01-18
Posts: 227
Points: 36

I'm not a big fan of using

I'm not a big fan of using tables at all, but that is a very interesting solution. However, I do have a different idea. I don't mean to waltz in here all over the topic either. Smile

What about using a faux columns method. I think that was discussed in the earlier post, but lemme explain.

I'm working on the code a little now, but we all know how to do multiple backgrounds, right?
But, what about the actual spacey bg, being your far back bg (html property styled), and your faux column (basically a single red column), be the other (body styled bg)? Any areas, such as the section just above the red streak, you define that bg separately. It adds just a few bytes extra of images, but I think it may be a better solution that tables IMO.

Does that make sense?

Titan793
Offline
Enthusiast
Syracuse, NY
Last seen: 9 years 14 weeks ago
Syracuse, NY
Timezone: GMT-5
Joined: 2009-02-20
Posts: 285
Points: 5

That's what I wanted to do

That's what I wanted to do at first as well.. but he needs the space bg to show through between each content div.. which is the problem with the faux bg unfortunately. I tried a variety of ways to sneak a faux bg column around just the final div, but I kept running into issues.

My "solution" is highly un-recommended by today's standards, but it works.. so I figured I'd post it. My gut says you need a faux column as well, but I can't manage to get it to work as needed.

If you can come up with something using them, please post em up here!!

downtap
downtap's picture
Offline
Enthusiast
Dallas, TX
Last seen: 5 years 6 weeks ago
Dallas, TX
Timezone: GMT-7
Joined: 2008-01-18
Posts: 227
Points: 36

I thought you might have

I thought you might have suggested it, but I didn't really look through the other post that extensively.
Well, the bg showing through the gaps is going to be an issue, however, that 1 pixel gap is really inconsequential IMO, a simple black border would look really, really close to the same to me, and probably wouldn't even be noticed. See the attached screenshot.

I'm not trying to knock your table solution, just I think that if can be avoided if at all possible, than it should. I actually wouldn't have thought of that, quite a neat solution. However, I do think we should probably fully investigate the faux column method first.

Now, I'm assuming all the red divs may grow or shrink as necessary?

AttachmentSize
screenshot.jpg 368.36 KB
Titan793
Offline
Enthusiast
Syracuse, NY
Last seen: 9 years 14 weeks ago
Syracuse, NY
Timezone: GMT-5
Joined: 2009-02-20
Posts: 285
Points: 5

No no, feel free to shoot

No no, feel free to shoot ideas around. My table solution is probably the last route I'd go if you are trying to stay away from tables. Throwing the doctype out the window to trick the browser into thinking this is 1990 isn't recommended I'm sure lol.

Yes, in that design, each content div has a variable height based on the content in that div. The lowest one needs to stretch the remaining height of the page however (if the content on the page is shorter than the browser window).

I'd love to find a faux column method for this situation.. I tried a few things, but as I mentioned, couldn't get it to work properly.

I managed to get a faux column in there, but it was setting it's height to 100% of the browser window height. So, even if the div only needed to be 100px high, it was showing anywhere from 100px up to 500-600 if the browser was fullscreen. Not sure if that makes sense, but it was taking the 100% height from an outer div, that was setting itself to the actual browser window height.

Keep at it though, would love to see what you come up with!

downtap
downtap's picture
Offline
Enthusiast
Dallas, TX
Last seen: 5 years 6 weeks ago
Dallas, TX
Timezone: GMT-7
Joined: 2008-01-18
Posts: 227
Points: 36

Yeah, I thought about

Yeah, I thought about setting the nonFooter div to 100%, therefore allowing to set the child div to 100%, but when I tried that, it broke I think because of the sticky footer method utilized. There is the option of changing the way the sticky footer is done, because setting a single column to a 100% height should be no problem. If the black border on the red div's are acceptable, though, the faux column method should work just fine.

downtap
downtap's picture
Offline
Enthusiast
Dallas, TX
Last seen: 5 years 6 weeks ago
Dallas, TX
Timezone: GMT-7
Joined: 2008-01-18
Posts: 227
Points: 36

Yeah, I thought about

***ugh, sorry, double post

Kelon
Offline
Regular
UK
Last seen: 10 years 50 weeks ago
UK
Joined: 2008-12-22
Posts: 17
Points: 0

So you're the multiple

So you're the multiple notification dude... it'll be walk the plank for you then Wink. You picked up on my Q about "why 1px", wondered if someone would. We're all thinking along the same lines and you guys are going to get there before I have chance to try my idea out... follow it to it's logical conclusion... ah, heck, wish I didn't have other stuff to do cos this is fun.

Kelon
Offline
Regular
UK
Last seen: 10 years 50 weeks ago
UK
Joined: 2008-12-22
Posts: 17
Points: 0

Right then... this is my

Right then... this is my contribution for what it's worth... I've not worked it through to it's completion, so it could all come apart in the wash. If it doesn't and it's got legs then I don't know how bullet-proof the solution would be if worked through properly, but here goes...

It's about cheating - visually pretending the image is showing through. Logical conclusion was: replace the border with a div. As in: inbetween each #content div, add another div with a class and a background. Scruffy code coming up:-

#content div.class {
   height:10px; /* 1px if you really must */
   background:  #000000 url(/sitegraphics/sci-fi.jpg) no-repeat;
   background-attachment:fixed;
   background-position: 0% 0%;
}

The same class could be used for the body and these divs of course for tidiness.

All these divs could stack up to fill a faux column (great minds indeed think alike) coloured red... though I'm thinking the div structure needs reorganising so as to enable the faux column to reliably fill the full height... or you've possibly another 'sticky footer' situation which I'm not too comfy with but I'm throwing ideas about now, hope you follow. I've not worked this through, just tested the above basic idea.

What do you think: a possible solution? Like I say, happy to be shot down... I'm great at flames and crashes, had loads of practice. If we can resolve this it'll be a real useful design template for us all.

downtap
downtap's picture
Offline
Enthusiast
Dallas, TX
Last seen: 5 years 6 weeks ago
Dallas, TX
Timezone: GMT-7
Joined: 2008-01-18
Posts: 227
Points: 36

Wish I'd thought of that. I

Wish I'd thought of that. I was actually thinking of something similar. but o well.
With a combo of the faux column technique, and the one described by Kelon, ended up with the screenshot attached. Now all that would need to be done is fix the h4 with the same technique.

That background technique doesn't work perfectly in ie7, but I think we can eventually fix that.

AttachmentSize
screenshot.jpg 350.22 KB
downtap
downtap's picture
Offline
Enthusiast
Dallas, TX
Last seen: 5 years 6 weeks ago
Dallas, TX
Timezone: GMT-7
Joined: 2008-01-18
Posts: 227
Points: 36

Had a quick performance

Had a quick performance question. That image would only get loaded once correct? Or will it be reloaded every time it's referenced by the css or html? I don't know how the different browsers handle the caching of dupe content.

Titan793
Offline
Enthusiast
Syracuse, NY
Last seen: 9 years 14 weeks ago
Syracuse, NY
Timezone: GMT-5
Joined: 2009-02-20
Posts: 285
Points: 5

Hey Downtap, one thing that

Hey Downtap, one thing that I noticed real fast is the footer isn't sticking in that image you linked.

Could some of your coding have broken the footerstickALT code? It's small, but there is a gap now.

I wish I was home, and had more freedom to actually look at things fullscreen. My boss sits behind me and can see everything I do, so I'm testing things in a tiny little window that hopefully she can't see lol..

I got another idea with the faux column trick as well that I'm going to try working on myself. Hopefully I can come up with some sort of progress and post any findings up here.

downtap
downtap's picture
Offline
Enthusiast
Dallas, TX
Last seen: 5 years 6 weeks ago
Dallas, TX
Timezone: GMT-7
Joined: 2008-01-18
Posts: 227
Points: 36

Didn't notice that before. I

Didn't notice that before. I made a mistake in how I applied the top border, and caused the footer to shift slightly.

Kelon
Offline
Regular
UK
Last seen: 10 years 50 weeks ago
UK
Joined: 2008-12-22
Posts: 17
Points: 0

Probably ended up doing what

Probably ended up doing what I did while messing about: removed the bottom self-coloured 3px border that was there originally. Looks good Downtap, we may well have cracked it. Warra great team. Be worth testing thoroughly, good template...

Titan793
Offline
Enthusiast
Syracuse, NY
Last seen: 9 years 14 weeks ago
Syracuse, NY
Timezone: GMT-5
Joined: 2009-02-20
Posts: 285
Points: 5

OMG!! I got it.. give me a

Ok.. Right now I have it almost working. As it stands, the bottom div stretches to the bottom of the page, however you need to scroll down to see the footer. I understand that this is not ideal.. but I'll leave it up to you if you can live with that lol.

You can fix this so that the bottom div stretches with no scrollbar by setting the negative top margin back on the footer (I have it set at 2px right now so the background can show through).

The issue with putting the negative margin back is that the bottom div stretches down and will look as if it is touching the footer. Maybe you could throw a top border on the footer to trick the eye into thinking that you can see the background through it? I don't recall who suggested that offhand, but if it's only 1px, you might be able to get away with it.

The other issue with this is that if the browser window height becomes too small, the footer will come up and cover the bottom content div. I've been unable to add padding/margins to anything to prevent this, but want to play with it more.

In any case, here's what I got so far.. I'm going to keep trying to come up with other work-arounds to get this to position as desired, but for now, this is where I'm at with a non-table version.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 
<HEAD>
 
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="author" content="Jazartra Ltd.">
 
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
<link rel="icon" type="image/ico" href="favicon.ico">
 
<TITLE>Jazartra Ltd : Home Page</TITLE>
 
<style type="text/css">
	*
    {
        margin: 0;
        padding: 0;
    }
 
html
    {
        height: 100%;
    }
 
body
    {
        height: 100%; 
        font-size: 62.5%;
        font-family: Verdana;
        color: #004A7F;
		background: #000000 url(sitegraphics/sci-fi.jpg) no-repeat;
    }
 
#nonFooter
    {
        position: relative;
        min-height: 100%;
        width: 800px;
        margin: 0 auto;
        padding: 0;
		overflow: hidden;
    }
 
* html #nonFooter
    {
        height: 100%;
    }
 
#header
    {
        width: 700px;    
        height: 80px;
        padding: 10px 50px;
        margin: 0;
        background: url(sitegraphics/bannerbg.jpg) no-repeat;
    }
 
#content
    {
        width: 700px;
        margin: 0 auto;
        padding: 0 0 100px 0;
		height: 100%;
    }
 
#footer
    {
        background-color: #c4d5ff;
		position: relative;
        margin: 0 auto;
		margin-top: 2px;
        height: 90px;
        width: 700px;
        padding: 0 50px;
        border-top: solid 3px #C4D5FF;
        text-align: center;
    } 
 
#footer p
    {
        text-align: center;
        margin: 0.3em 0 0 0;
        padding: 0;
    }
 
#footer a
    {
        margin: 0;
        padding: 0;
    }   
 
#footer img
    {
        float: none;
        border: none;
        text-align: center;
    }
 
h1
    {
        clear: left;
        text-align: center;
        font-size: 1.7em;
        font-weight: bold;
        padding-top: 1em;
    }
 
h2
    {
        font-size: 1.3em;
        font-style: italic;
        margin-top: 2em;
    }
 
h3
    {
        font-size: 1.1em;
        font-style: italic;
    }
a
    {
        color: Navy;
        font-size: 1.1em;
        font-weight: bold;
        text-decoration: none;
    }
 
a:visited, a:link
    {
        color: #004A7F;
    }
 
a:hover
    {
        color: orange;
    }
 
p
{
    font-size: 1em;
    text-align: justify;
    line-height: 2em;
}
 
img
{
    float: left;
    margin: 0 2em;
}
 
#header img
    {
        float: left;
        border: none;
        margin-left: 0;
    }
 
.BoxWithShadow
{
   margin-top: 1em;
   width: 680px;
   padding: 0;
   background-color: #DDF0FF;
   background-image: url(sitegraphics/shadowbox.gif);
   color: navy;
}
 
.BoxWithShadow h2
{
    font-style: normal;
    margin: 15px;
}
 
.BoxWithShadow img
{
    border: solid 3px Navy;
    float: left;
    margin: 10px 15px 5px 15px;
}
 
.ShadowBottom
{
    height: 20px;
    width: 680px;
    padding: 0;
    margin: 0 0 20px 0;
    background-image: url(sitegraphics/shadowbottom.gif);
}
 
.LastParagraph
{
    margin-bottom: 0;
}
 
.Company-Name
{
    font-style:italic;
}
 
.important-details
{
    font-weight: bold;
}
 
.contrast
{
    margin: 0;
    padding: 0;
    font-weight: bold;
}
 
.BoxWithShadow ul
{
    padding-left: 30px;
    font-size: 1.2em;
    list-style: none;
}
 
/****************** NAV MENU *******************/
 
#navigation-bar
    {
        float: left;
        width: 702px;    
        padding: 0 49px;
        margin: 0;
        background-color: #C4D5FF;
    }
 
#nav, #nav ul 
    {     
        padding: 0;     
        margin: 0;     
        list-style: none; 
        background: url(sitegraphics/menubg.png) repeat-y top left;
    } 
 
#nav a 
    {     
        display: block;     
        width: 140px;      
    } 
 
#nav li 
    {     
        float: left;     
        width: 138px; 
        background-color: #C4D5FF;
        border-left: solid 2px white;
    }
 
#nav #last-item
    {
         border-right: solid 2px white;  
    }    
 
#nav li a
    {
        text-align: center;
        padding-top: 0.6em;        
        padding-bottom: 0.6em;
    }
 
#nav li ul 
    {     
        position: absolute;     
        width: 138px;     
        left: -999em; 
        text-align: left;
    }  
 
#nav li ul li
    {   
        background-color: Transparent;
        border-top: solid 2px white;
        border-left: none;
    }
 
 
#nav li ul a
    {   
        text-align: left;
        margin-left: 5px;
    }
 
#nav li:hover ul, #nav li.sfhover ul
    {     
        left: auto; 
    }
 
#nav li:hover
    {
        background-position: 0 0;
    }
 
#nav li ul a:hover
    {
        color: white;
    }
 
/**************** END OF MENU ******************/
 
 
/**************** SITE MAP (AND BROWSERS) DL ******************/
 
dl
    {
        margin-top: 5px;
    }
 
dl dl
    {
        margin-top: 0;
        margin-left: 10px;
    }
 
dt
    {
        padding-left: 35px;
        background: url(sitegraphics/rootmenuicon.png) no-repeat 0 50%;
        margin-top: 1.5em;
        font-size: 1.2em;
        font-weight: bold;
    }
 
dt#home
    {
        background: url(sitegraphics/minilogo.png) no-repeat 0 50%;
    }
 
dt a
    {
        font-size: 1em;
    }
 
dl dl dt
    {
        font-size: 1em;
        background: url(sitegraphics/menuicon.png) no-repeat 0 50%;        
    }
 
dl dl dd
    {
        font-size: 1em;
    }
 
dd
    {  
        font-size: 1.1em;
        text-align: justify;
        padding-left: 35px;
    }
 
dt#camino, dt#ie, dt#firefox, dt#netscape, dt#opera, dt#safari
{
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}
 
dt#camino
    {
        background: url(sitegraphics/browsers/camino.png) no-repeat 0 50%;
    }
 
dt#ie
    {
        background: url(sitegraphics/browsers/ie.png) no-repeat 0 50%;
    }
 
dt#firefox
    {
        background: url(sitegraphics/browsers/firefox.png) no-repeat 0 50%;
    }
 
dt#netscape
    {
        background: url(sitegraphics/browsers/netscape.png) no-repeat 0 50%;
    }
 
dt#opera
    {
        background: url(sitegraphics/browsers/opera.png) no-repeat 0 50%;
    }
 
dt#safari
    {
        background: url(sitegraphics/browsers/safari.png) no-repeat 0 50%;
    }
 
 
 
 
/************** END OF SITE MAP (AND BROWSERS) ****************/
 
</style>
 
</HEAD>
 
<BODY>
<div id="nonFooter">
 
	<A name="TopOfPage"></A>
 
	<div id="header">
		<a href="index.php"><img src="sitegraphics/logo.gif" alt="Jazartra limited corporate Logo"></a>
 
	</div>  <!-- End of the Header div -->
 
	<div id="navigation-bar">
 
		<ul id="nav">
		<li><a href="webdesign.php">What We Do</a>
			<ul>
			<li><a href="webdesign.php">Web Development</a></li>
			<li><a href="graphicdesign.php">Graphic Design</a></li>
 
			<li><a href="accessibility.php">Accessible Sites</a></li>
			</ul>
		</li>
		<li><a href="index.php">Who We Are</a>
		</li>
		<li><a href="portfolio.php">Portfolio</a>
		</li>
 
		<li><a href="contactus.php">Contact Us</a>
			<ul>
			<li><a href="emailus.php">Contact Form</a></li>
			<li><a href="contactus.php">Contact Details</a></li>
			</ul>
		</li>
		<li id="last-item"><a href="help.php">Help</a>
 
			<ul>
			<li><a href="help.php">Accessibility</a></li>
			<li><a href="sitemap.php">Site Map</a></li>
			</ul>
		</li>
	</ul>
 
	</div>
 
<div id="content">
 
	<h1>Welcome to my current Problem</h1>
 
	<!-- Temporary Div to show my problem -->
	<div style="width: 100%; background-color: red; margin-top: 1px; height: 100px;">
	<p style="color: white">This clearly is not enough content to fill this box</p>
	</div>
 
	<div style="width: 100%; background-color: red; margin-top: 2px; height: 100px;">
	<p style="color: white">This clearly is not enough content to fill this box</p>
	</div>
 
	<div style="width: 700px; background-color: red; margin-top: 2px; height: 100%; position: absolute;">
	<p style="color: white">This clearly is not enough content to fill this box</p>
	</div>
 
	</div>  <!-- End of the Content div -->
 
</div>  <!-- End of the nonFooter div -->
 
<div id="footer">
 
	<p><A href="#TopOfPage">Top of the Page</A></p>
	<p><span class="contrast">Contrast: </span></p>
	<p>Copyright &copy;, 2008, Jazartra Ltd, all rights reserved.</p>
 
</div>  <!-- End of the Footer div -->
</BODY>
 
</HTML>

Kelon
Offline
Regular
UK
Last seen: 10 years 50 weeks ago
UK
Joined: 2008-12-22
Posts: 17
Points: 0

Just a quick note to say

Just a quick note to say this looks very interesting, though I've not the opportunity to take a real look-see just now. I will and contribute anything I feel is worth contributing...

Edit: I see the issue you're describing. The page ends up being 100% the browser window height plus the depth of the footer... interesting... my gut is it's the div structure.. don't know when I'll get chance to play, though like the rest of you I have an interest in doing this as it's a classic design clients do like. I've always used plainer backgrounds and made the content column solid (no transparant horizontal gutters), which is reasonably simple to code and I'm sure a lot of coders in here have done/are doing that. We're just trying to push it a bit further... which is cool.

Titan793
Offline
Enthusiast
Syracuse, NY
Last seen: 9 years 14 weeks ago
Syracuse, NY
Timezone: GMT-5
Joined: 2009-02-20
Posts: 285
Points: 5

Kelon wrote:I see the issue

Kelon wrote:

I see the issue you're describing. The page ends up being 100% the browser window height plus the depth of the footer... interesting... my gut is it's the div structure..

Yep, that's the issue.. it's not horrible, but it's far from the goal as well. On a page that already has a scrollbar, you honestly wouldn't even notice having to scroll an extra 93px to reach the end of the page, but if it is on a page with little to no content, having to scroll to see the footer would be a little strange.

I'm curious to see the code that other people are coming up with as well. Post up whatever you guys come up with and maybe we can bounce through eachother's work and come up with a solution.

The last bit of code that I posted actually works quite well if you set the footer's "margin-top:" to -93px. At that point, the page ends exactly at the end of the browser window, and the footer comes up over the final div.

This causes a few issues of it's own though in various situations, because it won't accept an extra padding to keep the content visible without causing scrollbars again.

I'm still playing around with things myself, and will keep posting any findings.

Kelon
Offline
Regular
UK
Last seen: 10 years 50 weeks ago
UK
Joined: 2008-12-22
Posts: 17
Points: 0

Titan793 wrote:I'm curious

Titan793 wrote:

I'm curious to see the code that other people are coming up with...

Absolutely, just a question of getting the time to do it...

Titan793 wrote:

The last bit of code that I posted actually works quite well if you set the footer's "margin-top:" to -93px. .... This causes a few issues of it's own though...

Yes, I'm racking my brain because I'm sure I've worked through something similar, only I tend to resolve these things, develop a way of doing something which I remember and move on, forgetting the connection with the problem that caused it sometimes, if you follow - getting old I guess, can only remember so much...

I will do this, as I said: just a question of finding a few minues extra in the day.. sorry for repeating myself, nothing inferred. Cheers..,

Titan793
Offline
Enthusiast
Syracuse, NY
Last seen: 9 years 14 weeks ago
Syracuse, NY
Timezone: GMT-5
Joined: 2009-02-20
Posts: 285
Points: 5

Ok Burlster.. I just had an

Ok Burlster.. I just had an epiphany, and I think we got this beat! This works, and I think that you will be fairly pleased with the results as there are no hacks, no cheats, all doctypes are in-tact, etc!

I basically split the entire page into 3 sections. The #nonFooter, the #footer, and a new #footer_push, that I crated. These 3 sections pull off of the 100% page height.. each has a % set to it. The #footer_push is used only to create the gap between the lowest content div, and the footer.

I have added comments throughout the HTML to explain what I did, and I'm sure you'll be able to see for yourself once you take a look at this. My comments are in all CAPS.

The only downside to this (and it's small if you ask me) is that the footer's height isn't fixed (nor is the spacer between the last content div and the footer, but this will never get very large). I set the footer's minimum height to a fixed value however, so it will never shrink below whatever you want to set it to.. it can expand vertically though if needed.

Otherwise, this works perfectly from the tests that I ran. Please check it out (everyone), and let me know what you think. I'll post the code, and a link to a sample that I uploaded to my website.

Ok so, here we go:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<HEAD>
 
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="author" content="Jazartra Ltd.">
 
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
<link rel="icon" type="image/ico" href="favicon.ico">
 
<TITLE>Jazartra Ltd : Home Page</TITLE>
 
<style type="text/css">
	*
    {
        margin: 0;
        padding: 0;
    }
 
html
    {
        height: 100%;
    }
 
body
    {
        height: 100%; 
        font-size: 62.5%;
        font-family: Verdana;
        color: #004A7F;
		background: #000000 url(sitegraphics/sci-fi.jpg) no-repeat;
    }
 
#nonFooter
    {
        position: relative;
        min-height: 85%;
        width: 800px;
        margin: 0 auto;
        padding: 0;
		overflow: hidden;
    }
 
* html #nonFooter
    {
        height: 85%;
    }
 
#header
    {
        width: 700px;    
        height: 80px;
        padding: 10px 50px;
        margin: 0;
        background: url(sitegraphics/bannerbg.jpg) no-repeat;
    }
 
#content
    {
        width: 700px;
        margin: 0 auto;
        padding: 0 0 100px 0;
		height: 100%;
    }
 
#footer
    {
        background-color: #c4d5ff;
		position: relative;
        margin: 0 auto;
		min-height: 90px;
        height: 14.5%;
        width: 700px;
        padding: 0 50px;
        text-align: center;
    } 
 
#footer_push
    {
        position: relative;
        margin: 0 auto;
		height: .5%;
        width: 700px;
    } 
 
#footer p
    {
        text-align: center;
        margin: 0px;
		padding-top: 5px;
    }
 
#footer a
    {
        margin: 0;
        padding: 0;
    }   
 
#footer img
    {
        float: none;
        border: none;
        text-align: center;
    }
 
h1
    {
        clear: left;
        text-align: center;
        font-size: 1.7em;
        font-weight: bold;
        padding-top: 1em;
    }
 
h2
    {
        font-size: 1.3em;
        font-style: italic;
        margin-top: 2em;
    }
 
h3
    {
        font-size: 1.1em;
        font-style: italic;
    }
a
    {
        color: Navy;
        font-size: 1.1em;
        font-weight: bold;
        text-decoration: none;
    }
 
a:visited, a:link
    {
        color: #004A7F;
    }
 
a:hover
    {
        color: orange;
    }
 
p
{
    font-size: 1em;
    text-align: justify;
    line-height: 2em;
}
 
img
{
    float: left;
    margin: 0 2em;
}
 
#header img
    {
        float: left;
        border: none;
        margin-left: 0;
    }
 
.BoxWithShadow
{
   margin-top: 1em;
   width: 680px;
   padding: 0;
   background-color: #DDF0FF;
   background-image: url(sitegraphics/shadowbox.gif);
   color: navy;
}
 
.BoxWithShadow h2
{
    font-style: normal;
    margin: 15px;
}
 
.BoxWithShadow img
{
    border: solid 3px Navy;
    float: left;
    margin: 10px 15px 5px 15px;
}
 
.ShadowBottom
{
    height: 20px;
    width: 680px;
    padding: 0;
    margin: 0 0 20px 0;
    background-image: url(sitegraphics/shadowbottom.gif);
}
 
.LastParagraph
{
    margin-bottom: 0;
}
 
.Company-Name
{
    font-style:italic;
}
 
.important-details
{
    font-weight: bold;
}
 
.contrast
{
    margin: 0;
    padding: 0;
    font-weight: bold;
}
 
.BoxWithShadow ul
{
    padding-left: 30px;
    font-size: 1.2em;
    list-style: none;
}
 
/****************** NAV MENU *******************/
 
#navigation-bar
    {
        float: left;
        width: 702px;    
        padding: 0 49px;
        margin: 0;
        background-color: #C4D5FF;
    }
 
#nav, #nav ul 
    {     
        padding: 0;     
        margin: 0;     
        list-style: none; 
        background: url(sitegraphics/menubg.png) repeat-y top left;
    } 
 
#nav a 
    {     
        display: block;     
        width: 140px;      
    } 
 
#nav li 
    {     
        float: left;     
        width: 138px; 
        background-color: #C4D5FF;
        border-left: solid 2px white;
    }
 
#nav #last-item
    {
         border-right: solid 2px white;  
    }    
 
#nav li a
    {
        text-align: center;
        padding-top: 0.6em;        
        padding-bottom: 0.6em;
    }
 
#nav li ul 
    {     
        position: absolute;     
        width: 138px;     
        left: -999em; 
        text-align: left;
    }  
 
#nav li ul li
    {   
        background-color: Transparent;
        border-top: solid 2px white;
        border-left: none;
    }
 
 
#nav li ul a
    {   
        text-align: left;
        margin-left: 5px;
    }
 
#nav li:hover ul, #nav li.sfhover ul
    {     
        left: auto; 
    }
 
#nav li:hover
    {
        background-position: 0 0;
    }
 
#nav li ul a:hover
    {
        color: white;
    }
 
/**************** END OF MENU ******************/
 
 
/**************** SITE MAP (AND BROWSERS) DL ******************/
 
dl
    {
        margin-top: 5px;
    }
 
dl dl
    {
        margin-top: 0;
        margin-left: 10px;
    }
 
dt
    {
        padding-left: 35px;
        background: url(sitegraphics/rootmenuicon.png) no-repeat 0 50%;
        margin-top: 1.5em;
        font-size: 1.2em;
        font-weight: bold;
    }
 
dt#home
    {
        background: url(sitegraphics/minilogo.png) no-repeat 0 50%;
    }
 
dt a
    {
        font-size: 1em;
    }
 
dl dl dt
    {
        font-size: 1em;
        background: url(sitegraphics/menuicon.png) no-repeat 0 50%;        
    }
 
dl dl dd
    {
        font-size: 1em;
    }
 
dd
    {  
        font-size: 1.1em;
        text-align: justify;
        padding-left: 35px;
    }
 
dt#camino, dt#ie, dt#firefox, dt#netscape, dt#opera, dt#safari
{
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}
 
dt#camino
    {
        background: url(sitegraphics/browsers/camino.png) no-repeat 0 50%;
    }
 
dt#ie
    {
        background: url(sitegraphics/browsers/ie.png) no-repeat 0 50%;
    }
 
dt#firefox
    {
        background: url(sitegraphics/browsers/firefox.png) no-repeat 0 50%;
    }
 
dt#netscape
    {
        background: url(sitegraphics/browsers/netscape.png) no-repeat 0 50%;
    }
 
dt#opera
    {
        background: url(sitegraphics/browsers/opera.png) no-repeat 0 50%;
    }
 
dt#safari
    {
        background: url(sitegraphics/browsers/safari.png) no-repeat 0 50%;
    }
 
 
 
 
/************** END OF SITE MAP (AND BROWSERS) ****************/
 
</style>
 
</HEAD>
 
<BODY>
<!-- THIS IS NOW SET TO BE A % OF THE PAGE HEIGHT -->
<!-- THIS % IS SHARED WITH THE FOOTER_PUSH, AND FOOTER DIV TO EQUAL 100% -->
<div id="nonFooter">
 
	<A name="TopOfPage"></A>
 
	<div id="header">
		<a href="index.php"><img src="sitegraphics/logo.gif" alt="Jazartra limited corporate Logo"></a>
 
	</div>  <!-- End of the Header div -->
 
	<div id="navigation-bar">
 
		<ul id="nav">
		<li><a href="webdesign.php">What We Do</a>
			<ul>
			<li><a href="webdesign.php">Web Development</a></li>
			<li><a href="graphicdesign.php">Graphic Design</a></li>
 
			<li><a href="accessibility.php">Accessible Sites</a></li>
			</ul>
		</li>
		<li><a href="index.php">Who We Are</a>
		</li>
		<li><a href="portfolio.php">Portfolio</a>
		</li>
 
		<li><a href="contactus.php">Contact Us</a>
			<ul>
			<li><a href="emailus.php">Contact Form</a></li>
			<li><a href="contactus.php">Contact Details</a></li>
			</ul>
		</li>
		<li id="last-item"><a href="help.php">Help</a>
 
			<ul>
			<li><a href="help.php">Accessibility</a></li>
			<li><a href="sitemap.php">Site Map</a></li>
			</ul>
		</li>
	</ul>
 
	</div>
 
<div id="content">
 
	<h1>Welcome to my current Problem</h1>
 
	<!-- Temporary Div to show my problem -->
	<div style="width: 100%; background-color: red; margin-top: 1px; height: 100px;">
	<p style="color: white">This clearly is not enough content to fill this box</p>
	</div>
 
	<div style="width: 100%; background-color: red; margin-top: 2px; height: 100px;">
	<p style="color: white">This clearly is not enough content to fill this box</p>
	</div>
 
	<div style="width: 700px; background-color: red; margin-top: 2px; height: 100%; position: absolute;">
	<p style="color: white">This clearly is not enough content to fill this box</p>
	</div>
 
</div>
<!-- End of the Content div -->
 
</div>
<!-- End of the nonFooter div -->
 
<!-- THIS WILL ADD THE SPACE BETWEEN THE FINAL CONTENT DIV AND THE FOOTER -->
<!-- CHANGE THE % IN THE CSS FOR THE ID, BE SURE TO CHANGE THE % IN THE NONFOOTER TOO -->
<div id="footer_push"></div> 
 
<!-- I SET A MIN-HEIGHT OF 90PX TO THIS, OTHERWISE IT'S A % OF PAGE HEIGHT -->
<div id="footer">
	<p><A href="#TopOfPage">Top of the Page</A></p>
	<p><span class="contrast">Contrast: </span></p>
	<p>Copyright &copy;, 2008, Jazartra Ltd, all rights reserved.</p>
</div>
<!-- End of the Footer div -->
 
</BODY>
</HTML>

And the link:
http://www.bdeanstudio.com/test/test.html

Let me know what you think! :thumbsup:

EDIT:
Oh yay.. there is a problem that I just found. If you add content to the final div, it won't stretch farther than the size it sets itself to based on it's % against the page height.

I'm working on this.. maybe someone else can help me try to work around this in the meantime?

burlster
burlster's picture
Offline
Leader
Bournemouth
Last seen: 2 years 21 weeks ago
Bournemouth
Timezone: GMT+1
Joined: 2007-05-31
Posts: 693
Points: 45

Fantastic!

Wow,

Thank you all so much for taking such an interest in this problem! It's actually really fun following how people are getting on with it.

Titan, thus far you get the best reply response and I've put YOUR code on MY site purely so you can see it easier with my graphics in place (or if you fancied it, you could just use absolute links.

http://fiat.mailstat.co.uk/JohnCSS/test.htm

This has all been so enlightening. Sorry I have not been around today, I work throughout the day then run a pub quiz every Tuesday evening which I write in the days breaks.

Thank you so much, I feel the solution is close now!

J

Have YOU said Hello yet?
The CSSCreator Hello Thread

Titan793
Offline
Enthusiast
Syracuse, NY
Last seen: 9 years 14 weeks ago
Syracuse, NY
Timezone: GMT-5
Joined: 2009-02-20
Posts: 285
Points: 5

burlster wrote:Wow, Thank

burlster wrote:

Wow,

Thank you all so much for taking such an interest in this problem! It's actually really fun following how people are getting on with it.

Titan, thus far you get the best reply response and I've put YOUR code on MY site purely so you can see it easier with my graphics in place (or if you fancied it, you could just use absolute links.

http://fiat.mailstat.co.uk/JohnCSS/test.htm

This has all been so enlightening. Sorry I have not been around today, I work throughout the day then run a pub quiz every Tuesday evening which I write in the days breaks.

Thank you so much, I feel the solution is close now!

J

Thanks man! I've been having a blast trying to solve this.. and I've hated every minute of it at the same time.. so thanks for that lol.

It's driving me nuts though that the final div doesn't work with more content in it. It's a combination of a few things I'm fairly certain.. one being how the background is set to absolute. It works to stretch it, but it's messing with other things.

Actually.. it's a combination of that (which is actually setting the background much longer than needed), and the "overflow: hidden;" that I placed on the #nonFooter in order to make sure the stretch only shows until it reaches the footer.

I need to find a way to keep it hidden, but yet make some of it visible at the same time lol.. which is not easy!

I definitely want to keep at it, and see if we can get it locked down "for real" .. but for now, it looks good with the 1 line of sample content in it lol. :thumbsup:

Titan793
Offline
Enthusiast
Syracuse, NY
Last seen: 9 years 14 weeks ago
Syracuse, NY
Timezone: GMT-5
Joined: 2009-02-20
Posts: 285
Points: 5

Hey Burlster.. I found a

Hey Burlster.. I found a workaround for this issue.

(To anyone who read this before 9:45am EST on 3/11, I thought of an issue late last night, so had to change the code yet again.)

Ok, In order to get this to work, you will need to do some extra grunt work "per page" .. which isn't ideal, but it's honestly not a huge pain either.

There are several key points to ensure that no content gets cut off. I'm 99% sure this completely works now, and that I've tested every possible problem.

I'll post sample code of a test page for you to see it in action, but let me try to explain what needs to be done a little first.

To get all of the content to show in each of your content divs, you are going to have to add inline css padding to your #content div, and adjust the height manually of each nested content div.

For your #content div: You need to add "padding-bottom:" to force the content in your FINAL nested content div to show.

(The reason for this is that the final content div has a 100% height with a "position: absolute" set to it. Technically, this div stretches way beyond the footer, but I put "overflow: hidden" on the #nonFooter which stops this from happening. If you added padding to the final content div, it would be considered overflow, and wouldn't show.. but by adding the padding to the main #content div, it is no longer overflow, and thus doesn't get hidden by the #nonFooter. It's hard to explain, but it works!)

For EVERY nested content div OTHER than your last one (see above): You need to adjust the height manually in EACH nested div to ensure your content will show.

You are going to need to change the padding/height manually by trial and error, to get all of the content to show. The padding/height in each section will be different based on that div's contents. The more content you pack in to each div, the more padding/height you will need to add to that div.

I hope that made sense, but here's some commented sample code for you to look at as well:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<HEAD>
 
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="author" content="Jazartra Ltd.">
 
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
<link rel="icon" type="image/ico" href="favicon.ico">
 
<TITLE>Jazartra Ltd : Home Page</TITLE>
 
<style type="text/css">
	*
    {
        margin: 0;
        padding: 0;
    }
 
html
    {
        height: 100%;
    }
 
body
    {
        height: 100%; 
        font-size: 62.5%;
        font-family: Verdana;
        color: #004A7F;
		background: #000000 url(<a href="http://fiat.mailstat.co.uk/JohnCSS/sitegraphics/sci-fi.jpg" rel="nofollow">http://fiat.mailstat.co.uk/JohnCSS/sitegraphics/sci-fi.jpg</a>) no-repeat;
    }
 
#nonFooter
    {
        position: relative;
        min-height: 85%;
        width: 800px;
        margin: 0 auto;
        padding: 0;
		overflow: hidden;
    }
 
* html #nonFooter
    {
        height: 85%;
    }
 
#header
    {
        width: 700px;    
        height: 80px;
        padding: 10px 50px;
        margin: 0;
        background: url(<a href="http://fiat.mailstat.co.uk/JohnCSS/sitegraphics/bannerbg.jpg" rel="nofollow">http://fiat.mailstat.co.uk/JohnCSS/sitegraphics/bannerbg.jpg</a>) no-repeat;
    }
 
#content
    {
        width: 700px;
        margin: 0 auto;
		height: 100%;
    }
 
#footer
    {
        background-color: #c4d5ff;
		position: relative;
        margin: 0 auto;
		min-height: 90px;
        height: 14.5%;
        width: 700px;
        padding: 0 50px;
        text-align: center;
    } 
 
#footer_push
    {
        position: relative;
        margin: 0 auto;
		height: .5%;
        width: 700px;
    } 
 
#footer p
    {
        text-align: center;
        margin: 0px;
		padding-top: 5px;
    }
 
#footer a
    {
        margin: 0;
        padding: 0;
    }   
 
#footer img
    {
        float: none;
        border: none;
        text-align: center;
    }
 
h1
    {
        clear: left;
        text-align: center;
        font-size: 1.7em;
        font-weight: bold;
        padding-top: 1em;
    }
 
h2
    {
        font-size: 1.3em;
        font-style: italic;
        margin-top: 2em;
    }
 
h3
    {
        font-size: 1.1em;
        font-style: italic;
    }
a
    {
        color: Navy;
        font-size: 1.1em;
        font-weight: bold;
        text-decoration: none;
    }
 
a:visited, a:link
    {
        color: #004A7F;
    }
 
a:hover
    {
        color: orange;
    }
 
p
{
    font-size: 1em;
    text-align: justify;
    line-height: 2em;
}
 
img
{
    float: left;
    margin: 0 2em;
}
 
#header img
    {
        float: left;
        border: none;
        margin-left: 0;
    }
 
.BoxWithShadow
{
   margin-top: 1em;
   width: 680px;
   padding: 0;
   background-color: #DDF0FF;
   background-image: url(sitegraphics/shadowbox.gif);
   color: navy;
}
 
.BoxWithShadow h2
{
    font-style: normal;
    margin: 15px;
}
 
.BoxWithShadow img
{
    border: solid 3px Navy;
    float: left;
    margin: 10px 15px 5px 15px;
}
 
.ShadowBottom
{
    height: 20px;
    width: 680px;
    padding: 0;
    margin: 0 0 20px 0;
    background-image: url(sitegraphics/shadowbottom.gif);
}
 
.LastParagraph
{
    margin-bottom: 0;
}
 
.Company-Name
{
    font-style:italic;
}
 
.important-details
{
    font-weight: bold;
}
 
.contrast
{
    margin: 0;
    padding: 0;
    font-weight: bold;
}
 
.BoxWithShadow ul
{
    padding-left: 30px;
    font-size: 1.2em;
    list-style: none;
}
 
/****************** NAV MENU *******************/
 
#navigation-bar
    {
        float: left;
        width: 702px;    
        padding: 0 49px;
        margin: 0;
        background-color: #C4D5FF;
    }
 
#nav, #nav ul 
    {     
        padding: 0;     
        margin: 0;     
        list-style: none; 
        background: url(sitegraphics/menubg.png) repeat-y top left;
    } 
 
#nav a 
    {     
        display: block;     
        width: 140px;      
    } 
 
#nav li 
    {     
        float: left;     
        width: 138px; 
        background-color: #C4D5FF;
        border-left: solid 2px white;
    }
 
#nav #last-item
    {
         border-right: solid 2px white;  
    }    
 
#nav li a
    {
        text-align: center;
        padding-top: 0.6em;        
        padding-bottom: 0.6em;
    }
 
#nav li ul 
    {     
        position: absolute;     
        width: 138px;     
        left: -999em; 
        text-align: left;
    }  
 
#nav li ul li
    {   
        background-color: Transparent;
        border-top: solid 2px white;
        border-left: none;
    }
 
 
#nav li ul a
    {   
        text-align: left;
        margin-left: 5px;
    }
 
#nav li:hover ul, #nav li.sfhover ul
    {     
        left: auto; 
    }
 
#nav li:hover
    {
        background-position: 0 0;
    }
 
#nav li ul a:hover
    {
        color: white;
    }
 
/**************** END OF MENU ******************/
 
 
/**************** SITE MAP (AND BROWSERS) DL ******************/
 
dl
    {
        margin-top: 5px;
    }
 
dl dl
    {
        margin-top: 0;
        margin-left: 10px;
    }
 
dt
    {
        padding-left: 35px;
        background: url(sitegraphics/rootmenuicon.png) no-repeat 0 50%;
        margin-top: 1.5em;
        font-size: 1.2em;
        font-weight: bold;
    }
 
dt#home
    {
        background: url(sitegraphics/minilogo.png) no-repeat 0 50%;
    }
 
dt a
    {
        font-size: 1em;
    }
 
dl dl dt
    {
        font-size: 1em;
        background: url(sitegraphics/menuicon.png) no-repeat 0 50%;        
    }
 
dl dl dd
    {
        font-size: 1em;
    }
 
dd
    {  
        font-size: 1.1em;
        text-align: justify;
        padding-left: 35px;
    }
 
dt#camino, dt#ie, dt#firefox, dt#netscape, dt#opera, dt#safari
{
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}
 
dt#camino
    {
        background: url(sitegraphics/browsers/camino.png) no-repeat 0 50%;
    }
 
dt#ie
    {
        background: url(sitegraphics/browsers/ie.png) no-repeat 0 50%;
    }
 
dt#firefox
    {
        background: url(sitegraphics/browsers/firefox.png) no-repeat 0 50%;
    }
 
dt#netscape
    {
        background: url(sitegraphics/browsers/netscape.png) no-repeat 0 50%;
    }
 
dt#opera
    {
        background: url(sitegraphics/browsers/opera.png) no-repeat 0 50%;
    }
 
dt#safari
    {
        background: url(sitegraphics/browsers/safari.png) no-repeat 0 50%;
    }
 
 
 
 
/************** END OF SITE MAP (AND BROWSERS) ****************/
 
</style>
 
</HEAD>
 
<BODY>
<!-- THIS IS NOW SET TO BE A % OF THE PAGE HEIGHT -->
<!-- THIS % IS SHARED WITH THE FOOTER_PUSH, AND FOOTER DIV TO EQUAL 100% -->
<div id="nonFooter">
 
	<A name="TopOfPage"></A>
 
	<div id="header">
		<a href="index.php"><img src="http://fiat.mailstat.co.uk/JohnCSS/sitegraphics/logo.gif" alt="Jazartra limited corporate Logo"></a>
 
	</div>  <!-- End of the Header div -->
 
	<div id="navigation-bar">
 
		<ul id="nav">
		<li><a href="webdesign.php">What We Do</a>
			<ul>
			<li><a href="webdesign.php">Web Development</a></li>
			<li><a href="graphicdesign.php">Graphic Design</a></li>
 
			<li><a href="accessibility.php">Accessible Sites</a></li>
			</ul>
		</li>
		<li><a href="index.php">Who We Are</a>
		</li>
		<li><a href="portfolio.php">Portfolio</a>
		</li>
 
		<li><a href="contactus.php">Contact Us</a>
			<ul>
			<li><a href="emailus.php">Contact Form</a></li>
			<li><a href="contactus.php">Contact Details</a></li>
			</ul>
		</li>
		<li id="last-item"><a href="help.php">Help</a>
 
			<ul>
			<li><a href="help.php">Accessibility</a></li>
			<li><a href="sitemap.php">Site Map</a></li>
			</ul>
		</li>
	</ul>
 
	</div>
 
<!-- ADD BOTTOM PADDING TO THIS DIV TO ENSURE THE CONTENT IN YOUR FINAL NESTED DIV SHOWS -->
<div id="content" style="padding-bottom: 165px;">
 
	<h1>Welcome to my current Problem</h1>
 
	<!-- CHANGE THE HEIGHT OF THIS DIV TO ENSURE THE CONTENT IN THIS DIV SHOWS -->
	<div style="width: 100%; background-color: red; margin-top: 1px; height: 105px;">
	<p style="color: white">This clearly is not enough content to fill this box</p>
	<p style="color: white">This clearly is not enough content to fill this box</p>
	<p style="color: white">This clearly is not enough content to fill this box</p>
	<p style="color: white">This clearly is not enough content to fill this box</p>
	<p style="color: white">This clearly is not enough content to fill this box</p>
	</div>
 
	<!-- CHANGE THE HEIGHT OF THIS DIV TO ENSURE THE CONTENT IN THIS DIV SHOWS -->
	<div style="width: 100%; background-color: red; margin-top: 2px; height: 225px;">
	<p style="color: white">This clearly is not enough content to fill this box</p>
	<p style="color: white">This clearly is not enough content to fill this box</p>
	<p style="color: white">This clearly is not enough content to fill this box</p>
	<p style="color: white">This clearly is not enough content to fill this box</p>
	<p style="color: white">This clearly is not enough content to fill this box</p>
	<p style="color: white">This clearly is not enough content to fill this box</p>
	<p style="color: white">This clearly is not enough content to fill this box</p>
	<p style="color: white">This clearly is not enough content to fill this box</p>
	<p style="color: white">This clearly is not enough content to fill this box</p>
	<p style="color: white">This clearly is not enough content to fill this box</p>
	<p style="color: white">This clearly is not enough content to fill this box</p>
	</div>
 
	<!-- DO NOT ADD BOTTOM PADDING TO THIS DIV, AS IT WILL DO NOTHING. THE PADDING FOR THIS DIV GOES IN YOUR #CONTENT DIV (SEE ABOVE) -->
	<div style="width: 700px; background-color: red; margin-top: 2px; height: 100%; position: absolute;">
	<p style="color: white">This clearly is not enough content to fill this box</p>
	<p style="color: white">This clearly is not enough content to fill this box</p>
	<p style="color: white">This clearly is not enough content to fill this box</p>
	<p style="color: white">This clearly is not enough content to fill this box</p>
	<p style="color: white">This clearly is not enough content to fill this box</p>
	<p style="color: white">This clearly is not enough content to fill this box</p>
	<p style="color: white">This clearly is not enough content to fill this box</p>
	<p style="color: white">This clearly is not enough content to fill this box</p>
	</div>
 
</div>
<!-- End of the Content div -->
 
</div>
<!-- End of the nonFooter div -->
 
<!-- THIS WILL ADD THE SPACE BETWEEN THE FINAL CONTENT DIV AND THE FOOTER -->
<!-- CHANGE THE % IN THE CSS FOR THE ID, BE SURE TO CHANGE THE % IN THE NONFOOTER TOO -->
<div id="footer_push"></div> 
 
<!-- I SET A MIN-HEIGHT OF 90PX TO THIS, OTHERWISE IT'S A % OF PAGE HEIGHT -->
<div id="footer">
	<p><A href="#TopOfPage">Top of the Page</A></p>
	<p><span class="contrast">Contrast: </span></p>
	<p>Copyright &copy;, 2008, Jazartra Ltd, all rights reserved.</p>
</div>
<!-- End of the Footer div -->
 
</BODY>
</HTML>

As usual, here's an uploaded page to my website as well so you can see it working.

http://www.bdeanstudio.com/test/test2.html

Again, this kind of sucks because as you code each page, you will have to manually set padding/height for each nested content div that you want to use.. but honestly, it only takes a few seconds to figure out the padding/height needed to ensure that everything shows.

* PLEASE NOTE - I've added so much content that the bottom div might no longer appear to be stretching depending on your resolution, but that is only because of the amount of test content in there. If you removed all of the content, padding, and height adjustments, it would stretch as normal.. I changed no code, aside from changing/adding the aforementioned values.

Titan793
Offline
Enthusiast
Syracuse, NY
Last seen: 9 years 14 weeks ago
Syracuse, NY
Timezone: GMT-5
Joined: 2009-02-20
Posts: 285
Points: 5

I've been testing this a bit

I've been testing this a bit more, and I actually think I got all the kinks worked out.

If you are ok with setting heights and padding manually on your content divs per page, this should work 100% unless I'm overlooking something!

Let me know what you think. :thumbsup:

burlster
burlster's picture
Offline
Leader
Bournemouth
Last seen: 2 years 21 weeks ago
Bournemouth
Timezone: GMT+1
Joined: 2007-05-31
Posts: 693
Points: 45

Fantastic!

I think you're a freaking genious. I'll see if I can't get the client to allow me to show you the results Smile

Thank you Titan, I take my hat off to you.

And thank you all, this has been a lot of fun!!

J

Have YOU said Hello yet?
The CSSCreator Hello Thread

Titan793
Offline
Enthusiast
Syracuse, NY
Last seen: 9 years 14 weeks ago
Syracuse, NY
Timezone: GMT-5
Joined: 2009-02-20
Posts: 285
Points: 5

burlster wrote:I think

burlster wrote:

I think you're a freaking genious. I'll see if I can't get the client to allow me to show you the results Smile

Thank you Titan, I take my hat off to you.

And thank you all, this has been a lot of fun!!

J

Thanks man, glad we got it worked out! I'm assuming this is an acceptable work-around for you.. so that's good!

I'd love to see the final results if you can swing it.. always curious to see the final products. Smile

This really has been a lot of fun.. can't wait for the next impossible problem that you come up with lol.