Margin-bottom just working with float-left - html

Question

On my markup I expect the footer with 25 pixels of bottom margin. I did this:
div.footer {
margin-bottom: 25px;
}
Without success — there is no bottom margin. If I do this:
div.footer {
margin-bottom: 25px;
float: left;
}
It works!
I know! I can solve the problem with floating, but it is a good practice? There is no other way?
Thanks in advance.
== UPDATE! / A little piece of my code ==
CSS:
div.rlside-margin {
margin: 0 25px;
}
div.tpside-margin {
margin: 25px 0;
}
div.allside-margin {
margin: 25px;
}
div.max-width {
width: 60em;
margin: 0 auto;
}
div.header {
background-color: #efefef;
width: 100%;
height: 90px;
}
div.post-header {
background-image: url("/Images/PostHeader_Background.jpg");
width: 960px;
height: 50px;
}
div.content {
position: relative;
}
div.footer {
margin-bottom: 25px;
}
HTML:
<div class="header">
<div class="max-width">
<ul class="navigation float-right">
<li>Home</li>
<li>Sobre</li>
<li>Fale conosco</li>
</ul>
</div>
</div>
<div class="max-width">
<div class="post-header">
<ul class="options float-left">
<li><span>Ofertas</span></li>
<li><span>Lista de compras (0)</span></li>
</ul>
<div class="search-bar float-right">
<form>
<input class="float-left" type="text" placeholder="Por qual produto você procura? Digite aqui" />
<button class="magnifier"></button>
</form>
</div>
</div>
</div>
<div class="content">
#RenderBody()
</div>
<div class="max-width">
<div class="footer">
<div class="tbside-margin">
<hr />
<ul class="bottom-navigation">
<li>Home</li>
<li>Sobre</li>
<li>Fale conosco</li>
</ul>
</div>
</div>
</div>

Answer 1

This is occurring because you've taken div out of the "normal flow." You've likely floated other elements, effectively taking them out of the main flow. Now that you want to position the div with margins it's not relative to the elements that have been taken out of the normal flow. That's why adding the float works, it places it into a new flow.
"A floated box is positioned within the normal flow, then taken out of
the flow and shifted to the left or right as far as possible. Content
may flow along the side of a float. [...] When a box is taken out of
normal flow, all content that is still within normal flow will ignore
it completely and not make space for it."
http://coding.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/

Answer 2

That's gonna depend a lot on your layout. Showing some html or URL would help. But, as Christian said, setting up the position would help. You might also try with position:relative; or also, instead of margin, try padding-bottom:25px;

Answer 3

I've solved!
At my footer's navigation, I have the follow markup:
<ul class="bottom-navigation">
<li>Home</li>
<li>Sobre</li>
<li>Fale conosco</li>
</ul>
And my CSS:
div.footer ul.bottom-navigation li {
float: left;
}
The question is: I can't float my menu items to the left. Why? I don't know, but I did this to resolve:
div.footer ul.bottom-navigation li {
display: inline;
}
It works — but I don't know why. The explanation will be very welcome.
Thanks!

Answer 4

You need to clear the float on the floated item's parent element.
Some left floated text
Some more left floated text
ul li span {
float: left;
}
.clearfix {
*zoom: 1;
}
.clearfix:before, .clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}