All geek questions in one place

IE7 Clear Float Issue

Hi, this is a simplified version of the problem that I am encountering with IE7. Basically, divs following a cleared div (green) do not behave as expected (in IE7). It works as expected in Safari, FF, etc. And IE8.

Does anyone have any fix tips. Thanks for any help :)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title></title>
    <style type="text/css">
    #wrap {width:600px;height:1000px;background:black;}
    .box {width:179px;height:180px; float:left; border-right:1px solid white;border-top:1px solid white;margin-right:20px;background:blue;}
    .clear{clear:left;}.small{height:100px}.xsmall{height:50px}.first{background:red;}.second{background:yellow;}.third{background:pink;}
    .fourth{background:green;}.fifth{background:aqua;}</style>
</head>
<body>
    <div id="wrap">
        <div class="box first"></div>
        <div class="box small second"></div>
        <div class="box xsmall third"></div>
        <div class="box clear fourth "></div>
        <div class="box fifth"></div>
        <div class="box sixth"></div>
    </div>
</body>
</html>
0
source share
1 answer

You can...

A) insert a “separator” a transparent element between the 3rd and 4th that will clear: both, span a height of 1 pixel, occupy the entire width, and then margin-top: -1px at 4, 5, 6, so there’s no vertical spacing of 1px.

B) use inline-block instead of float, for example: http://jsfiddle.net/gLcNm/16/

, div- , css-hack IE, inline .

C), div- "" div:

<div class="row">
<box><box><box>
</div>

row, .

+2

Source: https://habr.com/ru/post/1792752/

More articles:


All Articles