CSS/DIV alignment and footer issue.

[Albion]

Well, I decided to take everyones advice and use DIV/CSS instead of tables for my layout. After a full day of work I got everything looking good except for one thing.

Here's my code

<div id="sidepic"><img scr="..."></div>
<div id="wrap">
    <div id="header">
        ... stuff ...
    </div>
    <div id="nav">
        ... stuff ...
    </div>
    <div id="main">
        ... stuff ...
    </div>
    <div id="footersep"></div>
    <div id="footer">
        ... Stuff ...
    </div>
</div>

Here's my CSS

body,
html {
	margin: 0;
	padding: 0;
	background: #17467b;
	color: #17467b;
	font: Bold 10pt Verdana;
	text-align: justify;	
	}
body {
	min-width: 750px;
	}

#wrap {
	background: #2674d2;
	margin: 0 50px 0 50px;
	}
#sidepic {
	position: fixed;
	top: 0;
	left: 0;
	}
	
#header {
	background: #FFFFFF;
	background-image:url(Images/Background.gif);
	font: bold 7pt Times;
	color: black;	
	}
#nav {
	background: #17467b;
	}
#main {
	background: #FFFFFF;
	background-image:url(Images/Background.gif);
	height: 100%;
	}
#footersep {
	background: #17467b;
	height: 10px;
	}
#footer {
	background: #FFFFFF;
	background-image:url(Images/Background.gif);
	font: bold 7pt Times;
	color: black;
	position: relative;
	bottom: 0;
	clear: both;
	}

Right now if the main division is really small the footer divisions snug right up to the bottom of main division leaving a large area of background color underneith. I want the main division to stretch to fit the entire screen leaving the footer at the bottom of the screen unless the main division is larger then the entire screen then the footer division goes to the bottom of the main division.

Can anyone help?

Thanks

-CT

 

[BabyJeffy]

Some great articles have appeared that deal with multiple column layouts and how they work at extremes...

http://alistapart.com/articles/holygrail

http://www.w3.org/2002/03/csslayout-howto

http://www.positioniseverything.net/articles/onetruelayout/

http://www.glish.com/css/home.asp

http://www.tanfa.co.uk/css/layouts/

http://www.projectseven.com/index.htm

http://www.pmob.co.uk/temp/3colfixedtest_4.htm

I'm sure the answer is in there... these are excellent articles.

Cheers,
Jeff

[tt]Jeff's Page @ Code Couch

http://www.codecouch.com/jeff/blog/

http://www.coedit.co.uk/

[/tt]

What is Javascript? FAQ216-6094