Floats affecting each other?

Question

I have a page with 3 columns, one floated to the left, one to the right and one in the center. Within the central block I need to use several blocks with an image floated to the left to have the text to its left. This makes for a strange display bug where each block is indented a bit. A clear: both fixes the bug but also breaks the blocks out of the page frame. A simplified version of the html code of the page can be found below:

<div id="leftbar">Navigation</div>
<div id="rightbar">Right bar</div>
<div id="content">
    <div class='content-block'>
         <span class='image-floated'><img src='image'/></span>
         <span>Some content</span>
         <div class='someother_content'>content</div>
         <div class='content_bottom'>stuff</div>
    </div>
    <div class='content-block'>
       <span class='image-floated'><img src='image'/></span>
       <span>Some content</span>
       <div class='someother_content'>content</div>
       <div class='content_bottom'>stuff</div>
   </div>
</div>

and the css is as follows:

 #leftbar
 {
    float: left;
    width:  10%;
 }

 #rightbar
 {
    float: right;
    width: 20%;
 }

 .image-floated
 {
    float: left;
    width: 55px;
 }

 .content-block
 {
     padding-top: 3px;
 }

How can I fix this please ? Thank you in advance

Answer 1

If you give your left column an appropriate height, it will stop the image floating out of the central div.

#leftbar
{
float: left;
width:  10%;
height: 500px;
}

Answer 2

just write overflow:hidden; in your #content like this:

#content{overflow:hidden;}

Check the fiddle http://jsfiddle.net/RcEBf/