Wahoo! It isn't so much
more information - it's the information we've asked for! However, as you're new to coding this is a great opportunity to look at some code basics to make it easier to manage your code before we go back to the issue.
The first code sample really was a great post - simple, short and told us most of what was required. The second one tells me you've been trying lots of things, and it looks like the code (and maybe you?) is getting a little bit tired ;) To help, I suggest consider using shorthand as it makes css smaller, plus easier to read. See
Margin [w3.org] in section 8.3.1.
Using the css for #container as an example:- First step:
margin: 0px auto 0px auto; (Top, right, bottom, left - like a clock face 12, 3, 6, 9)
- That makes it obvious top/bottom, left/right are the same, so:
margin: 0px auto; (Top/bottom, left/right)
- Zero is zero regardless of the units of measure, so remove those wherever they appear, which gives us:
margin: 0 auto
Padding works exactly the same as margin, and there is shorthand for border too (Further down the page in the recommendations linked above). In this case you have a bottom-border-width of 0px so it does not show, but later set a color - which is redundant as there is no border to colour. Again, shorthand makes it easier to notice these things. Something like:
border: 1px solid #6F8A91;
border-style: solid solid none; (Top, left/right, bottom.)
Making those changes reduces the #container css from 21 lines to:
#container {
width: 1024px;
text-align: left;
background-color: #aaa; /* we don't have your image, so give us a colour to illustrate instead */
margin: 0 auto;
border: 1px solid #6F8A91;
border-style: solid solid none; (Top, left/right/bottom)
height: auto;
}
Note we don't need information about fonts etc because the issue is layout, and at this stage they are unlikely to be affecting what is happening.
Back to the issue. I understand you are trying things, and that's good, of course. Unfortunately the "solution" hasn't dealt with the issue that is stopping the floats from clearing, I suspect removing the heights means the clearing issue nolonger exists. All good in terms of problem-solving, but as
that has destroyed the basic layout of your document it isn't an ideal solution because it has just created an a different, but equally fatal issue instead.
Now it should be quite possible to get the floats to clear - and I expect your intiial thought this is about floats and heights is correct. But I'm not convinced the solution is to remove the heights and create a new issue - I think deal with the issue the heights create.
The links I provided in the first post explain why the floats did not expand the full height of the page when you set height:auto so that should answer your last question. But rather than dealing with this new issue, lets go back to the original one: Can you confirm applying clear:left to the footer (with the explicitly set heights as in your original code sample) did not work? If not, as above, can you post a short html sample so we can look at the structure of your document.
