mirror of
https://github.com/rn10950/RetroZilla.git
synced 2024-11-09 09:20:15 +01:00
217 lines
8.9 KiB
HTML
217 lines
8.9 KiB
HTML
|
<!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://www.fas.harvard.edu/~dbaron/csstest/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@fas.harvard.edu" TITLE="Send e-mail to David Baron">dbaron@fas.harvard.edu</a></p>
|
||
|
|
|
||
|
|
</body></html>
|