Problem with auto height

hi everybody, I'm having problem with the auto height (cause my page contains borders) here is my code what am I doing wrong (if I set float to left it works)
#page is the main div (all other divs all included in it)
the height goes only til bg_980.jpg is reached and not further.


html, body {
height: 100%;
}

body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: normal;
background: black;
}

#page {
width: 980px;
height: 100%;
margin: 0px auto 0px auto;
text-align: left;
border-width: 1px;
border-style: solid;
border-color: #444;
background: transparent url('../images/bg_980.jpg') no-repeat;
}

#lang {
width: 980px;
text-align: left;
height: 25px;
margin: 0px;
float: left;
background-color: #000000;
}

#header {
width: 980px;
text-align: left;
height: 200px;
margin: 4px 0px 2px 0px;
float: left;
}

#main {
height: auto;
width: 980px;
margin-right: 0px;
margin-left: 0px;
text-align: left;
float: left;
/* border-width: 1px;
border-style: solid;
border-color: blue;
*/
}

#menu {
width: 180px;
height: auto;
padding-top: 48px;
margin-right: 0px;
margin-left: 0px;
text-align: left;
float: left;
position: absolute;
/* border-width: 1px;
border-style: solid;
border-color: red;
*/
}

#content {
height: auto;
width: 780px;
padding-top: 15px;
margin-right: 42px;
margin-left: 220px;
text-align: left;
float: left;
position: relative;
/* border-width: 1px;
border-style: solid;
border-color: green;
*/
}

#footer {
width: 980px;
height: auto;
margin: 0px auto 0px auto;
text-align: center;
text-color: blue;
color: #B9B971;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: small;
font-size: 12px;
}

start off your css with

* { margin: 0; padding: 0; }


some browsers do not like height: auto; it depends on the browser.

Do you have a live preview of your site?

http://bonrouge.com/3c-hf-fluid-lc.php

yes here is a live version www.follaproperties.com/beta/ se e-> faq ... ty in advance ^_^

Hello k40t1x,

Here's a few changes that might help

#page {
width: 980px;
overflow: auto;
margin: 0px auto 0px auto;
text-align: left;
border-width: 1px;
border-style: solid;
border-color: #444;
background: transparent url('../images/bg_980.jpg') no-repeat;
}

#menu {
width: 180px;
height: auto;
padding-top: 48px;
margin-right: 0px;
margin-left: 0px;
text-align: left;
float: left;
}

#content {
height: auto;
width: 780px;
padding-top: 15px;
margin-right: 42px;
margin-left: 200px;
text-align: left;
}


In #page overflow: auto; clears the floats (http://www.quirksmode.org/css/clearing.html). Remove the height and let the div expand as needed.

in #menu remove the absolute positioning

in #content reduce left margin to margin-left:200px; See box model (http://www.w3.org/TR/CSS2/box.html) (780width plus 220margin is 1000px and your #main is only 980px.) Changing the right margin with margin:0 22px 0 220px will also work there.

thank you Excavator for your help, but i still have 2 problems:
* if I remove the absolute from the menu I get one div after the other which is wrong.
* there is a bad effect ow when I click a link i see first the footer then it goes down and I see then the main. you can see it in http://www.follaproperties.com ty in advande

That margin-right:42px; isn't doing much, maybe it all fits with room to spare if you get rid of it.
Try this -#page {
width: 980px;
overflow: auto;
margin: 0px auto 0px auto;
text-align: left;
border-width: 1px;
border-style: solid;
border-color: #444;
background: transparent url('../images/bg_980.jpg') no-repeat;
}

#menu {
width: 180px;
height: auto;
padding-top: 48px;
margin-right: 0px;
margin-left: 0px;
text-align: left;
float: left;
}

#content {
height: auto;
width: 780px;
padding-top: 15px;
/*margin-right: 42px;*/
margin-left: 200px;
text-align: left;
}

That might address the float drop. I'm not sure what your footer issue is, I don't think I see that in FF3, IE8 or IE7 here.

Great :D tnx a lot ... As you see I'm not so good at coding layouts, is there any good tutorial that you can recommend?

http://w3schools.com/xhtml/xhtml_intro.asp

w3schools has it all.