Question

I have a webpage with a header, a content, menus, and a footer place.
My content and my menus are in a same div called ‘allcontent’. I placed them in the right place with float. (content: float: left; – menus: float:right;)
I added a footer, just with a clear:both style plus some text formating. My problem – as You can see that in the image – the footer isnt at the right place. I placed it after the ‘allcontent’ div – wich contains the menus divs (!) – but it seems, it is effectless.

What should I do?

Here is a link to the website, in the sources You can see more detail of the divs.
Here is the css. wich has anything to do with this:

#container {
vertical-align: top;
width: 800px;
text-align: left;
margin-right: auto;
margin-left: auto;
font-size: 9px;
min-height:100%;
margin-bottom: 50px;
}
#footer {
background-color: #2D2425;
font-size: 10px;
font-style: normal;
font-family: Arial, Helvetica, sans-serif;
color: #E2E2E2;
text-align: center;
margin: 40px auto 0;
clear:both;
border-top-width: 1px;
border-top-style:dashed;
border-top-color: #CCC;}


#allcontent {
clear: both;
padding-left: 10px;
min-width: 800px;
min-height: 100%;}

(more in the given website’s sources)
I think these are playing this game.

I did search for sticky footer thingies, but those are for me, I think…
I also have been reading about tricks with padding and margin: no effect.

Sorry for my bad English!
Please try to help me!

Answer 1

I was able to fix by doing the following:

1.) Adding overflow: hidden to the #allcontent div.

2.) Removing the height: 135px from the #small div.