IE7 float and clear on the same element

Question

Here is my code,

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>[your title]</title>
    <style type="text/css">
    .a, .b, .c
    {
        float: left;
    }
    .b
    {
        clear: left;
    }
    </style>
</head>
<body>
<div class="a">1</div>
<div class="b">2</div>
<div class="c">3</div>
</body>
</html>

In IE8, firefox, chrome, safari, opera, the output will be:

1
23

However in IE7:

13
2

I have search for solutions two days already... anyone can help?

Cheers, bGiraffe

score 1 · Answer 1 · answered Mar 18 '10 at 05:47

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>[your title]</title>
    <style type="text/css">
    .a, .b, .c
    {
        float: left;
    }
    .b
    {
        clear: left;
    }
    </style>
</head>
<body>
<div class="a">1</div>
<div style="clear: left;"></div>
<div class="b">2</div>
<div class="c">3</div>
</body>

Thx for answing Durilai, but is there anyways to do it in css? I want to do it without source mark up:) — , Mar 18 '10 at 07:05

score 0 · Answer 2 · answered Mar 18 '10 at 08:13

0

this should fix it

.a, .b, .c { float: left; }
.b { clear: both; }

answered Mar 18 '10 at 08:13

pixeltocode

5,312
11
52
69

Why would that be any different than what he has? He has no right floats, so clear: left would do it. – Dustin Laine Mar 18 '10 at 15:45

score 0 · Answer 3 · answered Mar 18 '10 at 08:16

0

Or you could use the clearfix technique.

http://www.positioniseverything.net/easyclearing.html

answered Mar 18 '10 at 08:16

chimerical

5,883
8
31
37

That is for pushing down the bottom edge of a container to wholly contain its floated children, which is a different problem altogether. – Tgr Oct 21 '10 at 14:10

IE7 float and clear on the same element

3 Answers3

Linked