<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Floats and BFCs with horizontal margins</title>
<style type="text/css">
div.container
{
border: silver solid 5px;
margin: 1em;
width: 640px;
}
div.floatL
{
background-color: lime;
float: left;
height: 1em;
}
div.floatR
{
background-color: lime;
float: right;
height: 1em;
}
div.overflow
{
background-color: orange;
margin-left: 100px;
margin-right: 100px;
overflow: auto;
}
.width0 {width: 0;}
.width50 {width: 50px;}
.width100 {width: 100px;}
.width150 {width: 150px;}
</style>
</head>
<body>
<h1>Margins and block formating contexts (<a href="http://lists.w3.org/Archives/Public/www-style/2012Feb/0975.html">additional tests from Alan Gresley</a>)</h1>
<!--
non-positioned block boxes created before and after the float box
flow vertically as if the float did not exist.
http://www.w3.org/TR/CSS21/visuren.html#floats
The border box of (...) an element in the normal flow that
establishes a new block formatting context (such as an element with
'overflow' other than 'visible') must not overlap the margin box of
any floats in the same block formatting context as the element itself.
http://www.w3.org/TR/CSS21/visuren.html#floats
-->
<h3>The orange stripe has 'overflow: auto', 'margin-left: 100px' and 'margin-right: 100px'<br> The lime stripes are floats with various width (topmost is 0, bottommost is 150px)<br>The wrapping container has a solid silver border.</h3>
<div class="container"><div class="width0 floatL">floatL</div><div
class="overflow"><div> with 'overflow: auto'</div></div>
<div class="container"><div class="width50 floatL">floatL</div><div
class="overflow"><div> with 'overflow: auto'</div></div>
<div class="container"><div class="width100 floatL">floatL</div><div
class="overflow"><div> with 'overflow: auto'</div></div>
<div class="container"><div class="width150 floatL">floatL 150px</div><div
class="overflow"><div> with 'overflow: auto'</div></div>
<div class="container"><div class="width0 floatR">floatR</div><div
class="overflow"><div> with 'overflow: auto'</div></div>
<div class="container"><div class="width50 floatR">floatR</div><div
class="overflow"><div> with 'overflow: auto'</div></div>
<div class="container"><div class="width100 floatR">floatR</div><div
class="overflow"><div> with 'overflow: auto'</div></div>
<div class="container"><div class="width150 floatR">floatR 150px</div><div
class="overflow"><div> with 'overflow: auto'</div></div>
<!--
non-positioned block boxes created before and after the float box
flow vertically as if the float did not exist.
http://www.w3.org/TR/CSS21/visuren.html#floats
The border box of (...) an element in the normal flow that
establishes a new block formatting context (such as an element with
'overflow' other than 'visible') must not overlap the margin box of
any floats in the same block formatting context as the element itself.
http://www.w3.org/TR/CSS21/visuren.html#floats
-->
<h3>The orange stripe has 'overflow: auto', 'margin-left: auto' and 'margin-right: auto'<br> The lime stripes are floats with various width (topmost is 0, bottommost is 150px)<br>The wrapping container has a solid silver border.</h3>
</body>
</html>
Codebase Browser
chromium