diff options
| author | Morten Sørvig <msorvig@trolltech.com> | 2009-06-15 13:11:22 +0200 |
|---|---|---|
| committer | Morten Sørvig <msorvig@trolltech.com> | 2009-06-15 13:11:22 +0200 |
| commit | 4c5299f91c7cb1b5d0e87fb54ea75d5a5602682a (patch) | |
| tree | df986e76e7c38d71a4bc5c132e318f38f31fbe8e | |
| parent | ce64b6bc08cccb6483445ee4bc70cdb2ac78188b (diff) | |
Div positioning resarch.cache
| -rw-r--r-- | research/divtest.html | 103 |
1 files changed, 103 insertions, 0 deletions
diff --git a/research/divtest.html b/research/divtest.html new file mode 100644 index 0000000..46f56f7 --- /dev/null +++ b/research/divtest.html @@ -0,0 +1,103 @@ +<html> +<head> + + +<style type="text/css" media="screen"> +#example { + float:right; +} + +#example div { +} + +#div-before, #div-after { + background-color:#88d; + color:#000; +} +#div-1 { + width:400px; + background-color:#000; + color:#fff; +} +#div-1-padding { + padding:10px; +} +#div-1a { + background-color:#d33; + color:#fff; +} +#div-1b { + background-color:#3d3; + color:#fff; +} +#div-1c { + background-color:#33d; + color:#fff; +} +#example div p { + margin:0 .25em; + padding:.25em 0; +} +#description { + float:left; + width:40%; +} + + +#div-1 { + position:relative; + height:250px; +} +#div-1a { + position:absolute; + top:0; + right:0; + width:200px; +} +#div-1b { + position:absolute; + top:0; + left:0; + width:200px; +} + +</style> + +</head> + +<body> +<div id="example"> + +<div id="div-before"> +<p>id = div-before</p> +</div> + +<div id="div-1"> +<div id="div-1-padding"> + +<p>id = div-1</p> + +<div id="div-1a"> +<p>id = div-1a</p> +<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.</p> +</div> + +<div id="div-1b"> +<p>id = div-1b</p> +<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit. Nam mattis, arcu ut bibendum commodo, magna nisi tincidunt tortor, quis accumsan augue ipsum id lorem.</p> +</div> + +<div id="div-1c"><p>id = div-1c</p></div> + +</div></div><!-- /id=div-1-padding /id=div-1 --> + +<div id="div-after"> +<p>id = div-after</p> +</div> + +</div><!-- /id=example --> + +</body> +</html> + + |