Problem with div background and floats

I have the div #content with #sidebar and #conteudo inside of it.

With no floats the layout works perfectly, when I give a float to #conteudo the #content div disapears and the layout breaks completly with #conteuto going over the rest of the layout, #footer included.

<div id="content">
<div id="sidebar">
<h2>Menu</h2>
<div class="menu">
<ul><li>Item 1</li>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li></ul>
</div><!-- menu -->
<div class="menu_bottom"></div><!-- fundo menu -->
</div>
<!-- sidebar -->

<div id="conteudo">
<div class="entry">
<h1>Apresentação</h1>
<div class="info">22 setembro 2008</div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div><!-- entry -->
</div><!-- conteudo -->

</div><!-- content -->

Code (markup):

I checked the code and haven't found any unclosed tags.
The CSS even with simple width and float attributes will break as soon as #conteudo gets a float.

Have you ever had this problem? Do you know why it happens? How can I fix this?

An image of the problem is attached.

 

If you give something a float - it floats, and other content can go beneath it.

So for example, if we had:

a header - normal div
a sidebar div floated left
content also floated left
normal div footer

In the above case, the footer would go beneath the sidebar and content because they are floating. You can get around this by giving your footer a style of clear:left; or clear:right; or clear:both;

 

Yes you are right and I completly forgot to do the clear:both on the footer.

But even after doing that the #content background still doesn't show when i put a float on to #conteudo

 

Can you provide a link?

 

If you post the CSS in relation to the code above then we can help as this error is obviously CSS related.

It sounds as if you aren't clearing your floats.

Add float: left; to your #content inside your CSS and see if that fixes the background issue.

 

Hey, thanks alot, the float:left did the job.

But any explanation for this?

 

Yes see here for more information:

http://gtwebdev.com/workshop/floats/enclosing-floats.php

Because the last elements are floated then they are not enclosed.