I have a float issue in IE6&ie7:
<!DOCTYPE html>
<html>
<head>
<title>lily</title>
<style>
div{width: 100px; height: 100px;}
.div1{background: red; float: left;}
.div2{background: yellow;}
</style>
</head>
<body>
<div class="div1">div1</div>
<div class="div2">div2</div>
</body>
</html>
why it displays different in IE6&&IE7 and Chrome? And how to solve it in ie6&ie7?
:
On
<!DOCTYPE html>
<html>
<head>
<title>lily</title>
<style>
div{width: 100px; height: 100px;}
.div1{background: red; float: left;}
.div2{background: yellow; clear:both;}
</style>
</head>
<body>
<div class="div1">div1</div>
<div class="div2">div2</div>
</body>
On
First things first, try it with both of the divs floating and see what happens.
HERE is a FIDDLE with each scenario for you to test.
/* yours */
.yours div {
width: 100px;
height: 100px;
}
.yours .div1 {
background: red;
float: left;
}
.yours .div2 {
background: yellow;
}
/* mine */
.mine div {
width: 100px;
height: 100px;
float: left;
}
.mine .div1 {
background: red;
}
.mine .div2 {
background: yellow;
}
/* mine with a cleared float */
.mine-too div {
width: 100px;
height: 100px;
float: left;
}
.mine-too .div1 {
background: red;
}
.mine-too .div2 {
background: yellow;
clear: left;
/* not BOTH - you only need left - there is no right... */
}
Your second
divis clearing your first, but only the text. If you set a left margin you can tell it to sit next to the floated div.http://jsfiddle.net/Pjvtb/
Note: IE 6 and 7 incorrectly move the second
divpast the first one, due tohasLayout. You can search online for more information about the problems associated with it. There is also a3px"text jog" present in IE 6 (possibly 7 too, I can't remember) which usually meant, to display the same in all browsers, one would actually make themargin-left: 103pxto accommodate IE's weirdness.