CODEWITHSUNDEEP
cssgoogle-chromecss-floatinternet-explorer-7
Simone
Simone

Reputation: 2430

clear:both Chrome issue

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

Upvotes: 0

Views: 7928

Answers (6)

Simone
Simone

Reputation: 2430

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

Upvotes: 0

indian_gooner
indian_gooner

Reputation: 11

use clear:none; in the css property. It will work in chrome

Upvotes: 1

Andrea Ligios
Andrea Ligios

Reputation: 50203

Then it does not work anywhere ? :o)

You are probably applying the float:left to the clear:both divs too...

this works in all browsers:

http://jsfiddle.net/kKwkd/

HTML

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

CSS

#header, #footer{    
    border: 1px dashed blue;
}

#col1,#col2,#col3{
    float: left;    
    border: 1px solid red;
    padding: 50px;
    margin: 10px;
}

Upvotes: 0

turiyag
turiyag

Reputation: 2887

clear:both works just fine in Chrome/IE7. See this example of how to properly use it. http://jsfiddle.net/turiyag/LvMRY/2/

Can you post a link to your site, or your full actual code?

CSS:

div {
    border: 1px solid black;
}

.floaty {
    height: 50px;
    width: 50px;
    float: left;
    background: green;
}

.cleary {
    height: 100px;
    width: 200px;
    clear: both;
    background: cyan;
}

HTML

<html>
    <head>
    </head>

    <body>
        <div class="floaty">Floaty</div>
        <div class="floaty">Floaty</div>
        <div class="floaty">Floaty</div>
        <div class="floaty">Floaty</div>
        <div class="cleary">Cleary</div>
        <div class="floaty">Floaty</div>
        <div class="floaty">Floaty</div>
    </body>
</html>

Upvotes: 1

Tomas Ramirez Sarduy
Tomas Ramirez Sarduy

Reputation: 17471

Is better for semantic to use a class for this things. The correct way to go is:

HTML

<div id="header">...</div>
<div id="content" class="clearfix">
    <div id="col1">...</div> <--- float left
    <div id="col2">...</div> <--- float left
    <div id="col3">...</div> <--- float left
    <div class="clearfix"></div> <--- DOES NOT WORK
</div>
<div id="footer">...</div>

CSS:

/* new clearfix */
.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
    }
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

Yes it’s ugly, but it works very well, enabling designers to clear floats without hiding overflow and setting a width or floating (nearly) everything to get the job done.

Upvotes: 0

Savas Vedova
Savas Vedova

Reputation: 5692

It actually works. You are just not using it properly.

If you use clear:both the following element will be effected only. So for instance,

floated left | floated left | clear: both;
floated left | clear: left;
floated left | cleawr: right; | floated: left

Imagine that each text between "|" is a block element. If you float the elements and use the clear like the example above, the code should display something like above.

Check here for a live example: Try removing the clear attribute and you will see how the browser places "DOES NOT WORK".

http://jsfiddle.net/6VjSL/

Upvotes: 1

Related Questions