Okay, so the way I expect this to act, with my understanding of positioning,
floats, and clears, is not the way it acts. I want to know if there is a way I
can get it to act right.
Basically, Is there a way to get an element to only clear floated elements
within the same parent containing element as it is in? I thought position
relative would do this, but it doesn't.
example (notice how the red border boxes fall down below the "Side" box):
<head>
<title>ClearTest</title>
<style type="text/css">
<!--
#Main .right{
clear: right;
float: right;
width: 100px;
margin: 5px;
border: thin solid #FF0000;
}
#Main {
width: 500px;
}
#Side {
float: right;
width: 200px;
margin-left: 10px;
border: thin solid #0000FF;
height: 500px;
}
-->
</style>
</head>
<body>
<div id="Side">Just a box floated :right outside of the "Main" to mess up the
clears on the "right" boxes</div>
<div id="Main">
<div class="right">Some image or something.</div>
<div class="right">Some image or something.</div>
<div class="right">Some image or something.</div>
<div class="right">Some image or something.</div>
<div class="right">Some image or something.</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec interdum
justo vitae ligula pharetra sed euismod sapien sodales. Praesent eleifend velit
vitae lacus aliquam varius. Vestibulum dolor libero, iaculis gravida fringilla
sed, placerat a arcu. Mauris porttitor tincidunt varius. Sed vitae lectus non
mi egestas congue. Nullam pharetra mollis interdum. Fusce vel lorem dolor, eu
pellentesque neque. Nullam erat dolor, tempus vitae ornare et, condimentum a
tellus. Nunc consectetur adipiscing enim, non tempor lectus commodo vel.
Curabitur imperdiet nisi et ligula ultricies porttitor. Pellentesque dolor
tortor, rutrum id cursus vitae, feugiat vel lectus. Curabitur tellus sem,
laoreet sed tempor nec, hendrerit eget nisl. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Pellentesque purus magna, vulputate eget dapibus
ac, fringilla eu justo. Sed dolor justo, auctor at aliquet sed, tincidunt sit
amet mi. Sed non est risus.</p>
<p>Nunc risus quam, dignissim at cursus in, commodo non risus. Ut dolor ante,
facilisis quis molestie a, adipiscing a mi. Sed lorem erat, dapibus non gravida
a, viverra sed nulla. Cras fermentum, nisi quis tempor viverra, justo magna
condimentum lectus, sit amet dapibus magna sapien sed eros. Fusce ornare erat
nec orci feugiat euismod. Mauris elit enim, ornare ut convallis ac, dictum non
ligula. Quisque at ante risus, non volutpat risus. Nullam lobortis dignissim
mauris, at facilisis magna scelerisque sit amet. Pellentesque lobortis, orci
sit amet tincidunt imperdiet, lorem est faucibus urna, eu tincidunt felis leo
sed odio. Fusce in ligula id arcu sollicitudin accumsan.</p>
<p>Mauris felis metus, hendrerit at convallis vitae, fringilla id tortor. Cum
sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
mus. Suspendisse potenti. Phasellus tempus cursus magna, et pharetra libero
vestibulum vitae. Vestibulum porttitor placerat diam, a posuere nulla mattis
non. Aliquam eleifend blandit odio, vel interdum sapien tincidunt eget.
Phasellus pellentesque magna et elit sagittis volutpat. Ut metus ante,
porttitor eu iaculis quis, molestie sit amet purus. Aenean sit amet tortor dui,
et feugiat sem. Suspendisse ac est at felis ultricies laoreet non ut nulla.
Aenean condimentum adipiscing elit vel laoreet. Curabitur faucibus nisi ac
risus vestibulum iaculis. Aenean iaculis metus eu orci vestibulum molestie. Nam
felis est, faucibus sit amet congue non, imperdiet id lectus. Proin imperdiet
pharetra blandit.</p>
</div>
</body>
</html>
______________________________________________________________________
css-discuss [[email protected]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
