gecko/layout/html/tests/block/bugs/4515.html

217 lines
8.8 KiB
HTML
Raw Normal View History

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<html lang="en-US">
<head>
<title>Widths and margins of floating, non-replaced elements</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<link rel="copyright" href="/~dbaron/legal.html">
<style type="text/css">
DIV.contain { height: 10em; border: medium solid purple; text-align: justify;
color: black; background: white; }
.fr { float: right; border: thin solid green; }
.fl { float: left; border: thin solid green; }
P.eight { position: relative; width: 30%; margin-left: auto; margin-right: auto; left: auto; right: auto; }
P.eleven { position: relative; width: 30%; left: 80px; }
P.twelve { position: relative; width: 30%; left: 20px; right: 70px; }
P.thirteen { position: relative; width: 30%; left: 10%; }
P.fourteen { position: relative; width: 30%; right: 10%; }
P.fifteen { position: relative; width: 30%; left: -10%; right: auto; }
P.sixteen { position: relative; width: 30%; right: -10%; left: auto; }
</style>
</head>
<body>
<h1>Widths and margins of floating, non-replaced elements</h1>
<p>
This is an excerpt from <a
href="http://dbaron.org/css/test/sec100305">my
test</a> -David Baron.
</p>
<div class="contain">
<p class="fl eight">
This should be floating left and be 30% wide. Its border should
touch its container's border.
</p>
This is text in the containing <code>div</code>. It should span the
width of the <code>div</code> up to the edge of the float. Therefore
its left edge should touch the float and its right edge should touch
the border of the containing <code>div</code>.
</div>
<div class="contain">
<p class="fr eight">
This should be floating right and be 30% wide. Its border should
touch its container's border.
</p>
This is text in the containing <code>div</code>. It should span the
width of the <code>div</code> up to the edge of the float. Therefore
its right edge should touch the float and its left edge should touch
the border of the containing <code>div</code>.
</div>
<div class="contain">
<p class="fl eleven">
This should be floating left and should be 30% of the width of its
parent. It should be displaced 80px to the right.
</p>
This is text in the containing <code>div</code>. It should span the
width of the <code>div</code> including 80px of the float. Therefore
its left edge should be 80px inside the float and its right edge should touch
the border of the containing <code>div</code>.
</div>
<div class="contain">
<p class="fr eleven">
This should be floating right and should be 30% of the width of its
parent. It should be displaced 80px to the right.
</p>
This is text in the containing <code>div</code>. It should span the
width of the <code>div</code> up to 80px away from the edge of the
float. Therefore its right edge should be 80px away from the edge of
the float and its left edge should touch the border of the containing
<code>div</code>.
</div>
<div class="contain">
<p class="fl twelve">
This should be floating left and should be 30% of the width of its
parent. It should be displaced 20px to the right.
</p>
This is text in the containing <code>div</code>. It should span the
width of the <code>div</code> including 20px of the float. Therefore
its left edge should be 20px inside the float and its right edge should touch
the border of the containing <code>div</code>.
</div>
<div class="contain">
<p class="fr twelve">
This should be floating right and should be 30% of the width of its
parent. It should be displaced 20px to the right.
</p>
This is text in the containing <code>div</code>. It should span the
width of the <code>div</code> up to 20px away from the edge of the
float. Therefore its right edge should be 20px away from the edge of
the float and its left edge should touch the border of the containing
<code>div</code>.
</div>
<div class="contain">
<p class="fl thirteen">
This should be floating left and should be 30% of the width of its
parent. It should be displaced 10% of the width of its parent
to the right.
</p>
This is text in the containing <code>div</code>. It should span the
width of the <code>div</code> including one third of the float (minus
the border width). Therefore its left edge should be one third of
the way inside the float and its right edge should touch the border of
the containing <code>div</code>.
</div>
<div class="contain">
<p class="fr thirteen">
This should be floating right and should be 30% of the width of its
parent. It should be displaced 10% of the width of its parent
to the right.
</p>
This is text in the containing <code>div</code>. It should span the
width of the <code>div</code> up to 10% of the width of the
containing <code>div</code> from the edge of the float. Therefore
its right edge should be 10% of the width of the containing
<code>div</code> away from the edge of the float and its left edge
should touch the border of the containing <code>div</code>.
</div>
<div class="contain">
<p class="fl fourteen">
This should be floating left and should be 30% of the width of its
parent. It should be displaced 10% of the width of its parent
to the left.
</p>
This is text in the containing <code>div</code>. It should span the
width of the <code>div</code> up to 10% of the width of the
containing <code>div</code> from the edge of the float. Therefore
its left edge should be 10% of the width of the containing
<code>div</code> away from the edge of the float and its right edge
should touch the border of the containing <code>div</code>.
</div>
<div class="contain">
<p class="fr fourteen">
This should be floating right and should be 30% of the width of its
parent. It should be displaced 10% of the width of its parent
to the left.
</p>
This is text in the containing <code>div</code>. It should span the
width of the <code>div</code> including one third of the float (minus
the border width). Therefore its right edge should be one third of
the way inside the float and its left edge should touch the border of
the containing <code>div</code>.
</div>
<div class="contain">
<p class="fl fifteen">
This should be floating left and should be 30% of the width of its
parent. It should be displaced 10% of the width of its parent
to the left.
</p>
This is text in the containing <code>div</code>. It should span the
width of the <code>div</code> up to 10% of the width of the
containing <code>div</code> from the edge of the float. Therefore
its left edge should be 10% of the width of the containing
<code>div</code> away from the edge of the float and its right edge
should touch the border of the containing <code>div</code>.
</div>
<div class="contain">
<p class="fr fifteen">
This should be floating right and should be 30% of the width of its
parent. It should be displaced 10% of the width of its parent
to the left.
</p>
This is text in the containing <code>div</code>. It should span the
width of the <code>div</code> including one third of the float (minus
the border width). Therefore its right edge should be one third of
the way inside the float and its left edge should touch the border of
the containing <code>div</code>.
</div>
<div class="contain">
<p class="fl sixteen">
This should be floating left and should be 30% of the width of its
parent. It should be displaced 10% of the width of its parent
to the right.
</p>
This is text in the containing <code>div</code>. It should span the
width of the <code>div</code> including one third of the float (minus
the border width). Therefore its right edge should be one third of
the way inside the float and its left edge should touch the border of
the containing <code>div</code>.
</div>
<div class="contain">
<p class="fr sixteen">
This should be floating right and should be 30% of the width of its
parent. It should be displaced 10% of the width of its parent
to the right.
</p>
This is text in the containing <code>div</code>. It should span the
width of the <code>div</code> up to 10% of the width of the
containing <code>div</code> from the edge of the float. Therefore
its left edge should be 10% of the width of the containing
<code>div</code> away from the edge of the float and its right edge
should touch the border of the containing <code>div</code>.
</div>
<hr title="Beginning of Footer">
<p><a href="http://validator.w3.org/check/referer" title="W3C HTML Validator"><img src="ant.jpg" alt="Valid HTML 4.0!" height="31" width="88"></a></p>
<p>(Back to
<a href="./">CSS Testing Information</a>,
<a href="../">David Baron</a>)</p>
<p><a href="/~dbaron/" title="David Baron's Homepage">LDB</a>,
<a rev="made" href="mailto:dbaron@dbaron.org" TITLE="Send e-mail to David Baron">dbaron@dbaron.org</a></p>
</body></html>