clear:both Chrome issue

Question

I dont really understand how is possible that a

<div style="clear:both"></div>

doesn't work in Chrome. I have this layout:

<div id="header">...</div>
<div id="content">
    <div id="col1">...</div> <!-- float left -->
    <div id="col2">...</div> <!-- float left -->
    <div id="col3">...</div> <!-- float left -->
    <div style="clear:both"></div> <!-- DOES NOT WORK -->
</div>
<div style="clear:both"></div> <!-- DOES NOT WORK -->
<div id="footer">...</div>

So, I've used the clear:both before the footer and/or after the col3.

It does not work either in IE7 but, in this moment I dont really care.

Can anyone help me please?

I Add more informations:

#content {
    padding-top: 19px;
    display: block;
}

#col1,
#col3 {
    width: 21%;
    position: relative;
    padding: 0 0 1em 0;
    float: left;
}

#col2 {
    width: 58%;
    position: relative;
    padding: 0 0 1em 0;
    float: left;
}

SOLVED: Im sorry.... the information i gave you still were not enough! The problem was the content of a column!! In col1 i had a div with height:40px so even if the content was much more than 40px, for the browser it was like there was no overflow... Hope i ve been clear in the explanation.. However the Tom Sarduy's solution is interesting but doesnot work in IE... ive tried yesterday and today, but it's like the style is not taken... i see it in the developer tool of the browser but it is not applied

Answer 1

the information i gave you still were not enough! The problem was the content of a column!! In col1 i had a div with height:40px so even if the content was much more than 40px, for the browser it was like there was no overflow... Hope i ve been clear in the explanation.. However the Tom Sarduy's solution is interesting but doesnot work in IE... ive tried yesterday and today, but it's like the style is not taken... i see it in the developer tool of the browser but it is not applied