TalkPHP - View Single Post

xenon · 01-15-2008, 06:19 PM

A clear is always required after floating elements. Otherwise, you risk your sanity because everything flows around:

html4strict Code:

<html>
<head>

    <style type="text/css">

        div.left
        {
            float: left;
            overflow: hidden;
            border: 1px solid red;
            width: 100px;
            height: 200px;
        }
        div.right
        {
            float: left;
            overflow: hidden;
            border: 1px solid blue;
            width: 100px;
            height: 200px;
            margin-left: 2px;
        }
        .clear { clear:both; float:none;}
    </style>

</head>
<body>

    <div class="left">Left Column</div>
    <div class="right">Right Column</div>
    <div class="clear"></div>
</body>
</html>