100% of height with a footer

debecc

08-09-2007, 01:51 PM

Hi,

i have been searching for an answer to this and can't quite find an answer.

I have a layout with a header div. A container div that has a left menu div and a content div inside it - these are using floats. And also a footer div that I have tried outside of the container div as well as inside the container div.

I would like the left menu div be filled with a background color and to be 100% of the container div. Stopping at the footer.

Right now i can either get it to come close to the footer OR it goes past the footer to the end of the viewport.

I have just given the CSS and HTML that is revelant.

CSS:
body, h1, h2, h3, h4, h5, h6, p, blockquote, ul, ol, li, table, tr, th, td, form {
margin: 0; padding: 0; border: 0; list-style: none; font-size: 100%; font-weight: normal;
}

html, body {
height: 100%
text-align : center;
}

body {
background-color: #F9F4c5;
}

#header {
width: 750px;
margin: 0px auto;
padding: 0px;
}

#container {
padding: 0px;
margin-right: auto;
margin-left: auto;
width: 750px;
min-height: 100%;
margin-top: 0px;
margin-bottom: 0px;
}
/* IE-specific hack */
* html #container {
height: 100%;
}

#content {
width: 610px;
margin-right: auto;
margin-left: auto;
vertical-align: bottom;
float: right;
}
#lftmenu {
position:relative;
background-color: #9BD393;
width: 135px;
margin: 0px;
padding: 0px;
background-repeat: no-repeat;
float: left;
background-image: url(../images/toplftmenu.jpg);
background-position: left top;
text-align: right;
min-height: 100%;
}

.clearfloats {
line-height: 0px;
font-size: 0px;
clear: both;
height: 0px;
}
#footer{
background-color: #ae89bd;
width: 750px;
margin-right: auto;
margin-left: auto;
}

HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
.......
<div id="header"> HEADER CONTENT
</div>


<div id="container">



<div id="content">Middle Content

</div>


<div id="lftmenu">
CONTENT FOR LEFT MENU
</div>

<div class="clearfloats"></div>


<div id="footer">
CONTENT FOR FOOTER
</div>
</div>

Also a link to the site is here: http://www.insidescoopri.com/insidescoop/Untitled-1.html

THANKS SO MUCH TO ANYONE WHO CAN POINT ME IN THE RIGHT DIRECTION
IM LOST!!!

Thanks
Deb

canadianjameson

08-09-2007, 04:42 PM

hey Deb, i would recommend that when you post, you encase your code in these tags (without *)

[*code] code here [/*code]

and it'll look like this

can you possibly provide a url so we can see what is going wrong?

debecc

08-09-2007, 05:04 PM

Thanks for your reply!

Sorry bout the code. I have never really posted here before.

Here is a link to the page i am working on. It's in progress as I i trying to figure out layout right now with my wee bit of CSS knowledge! :)

http://www.insidescoopri.com/insidescoop/Untitled-1.html

Thanks
Deb

canadianjameson

08-09-2007, 05:09 PM

so basically you want to get rid of the little patch of green underneath the purple footer?

canadianjameson

08-09-2007, 05:33 PM

i think part of your problem is a browser issue... see in IE i don't see the left menu at all but the footer is on the bottom

I'll have a closer look after lunch, but my troubleshooting skills leave something to be desired

effpeetee

08-10-2007, 08:59 AM

Footer looks OK to me using IE7. Left panel is missing. With Firefox. Footer is not on the bottom.

Frank

debecc

08-10-2007, 12:40 PM

Thanks everyone for checking it out. I think I just need to start from scratch.

:o :confused:

canadianjameson

08-10-2007, 05:53 PM

Hey Deb,

Don't get discouraged: go to http://validator.w3.org/ and enter the address of your page in there. I suggest going to "more options" and selecting 'verbose output"

From what I saw it outlined the major problems you were having

If you need further help, just post back :)

Chin up :D

harbingerOTV

08-11-2007, 03:34 AM

http://www.themaninblue.com/writing/perspective/2005/08/29/

canadianjameson

08-11-2007, 05:15 PM

Thats a good link to have, thanks harbinger