Joseph Sims schrieb:
> 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/
>
Hello,
you could define "float:left;" or "position: absolute;" for #Main.
Either way will cause the clears of the inner objects only to be
influenced by the other floated objects within #Main, but not by #Side.
Christian
*Editura Gesellschaft für Verlagsdienstleistungen mbH*
Tempelhofer Damm 2 · 12101 Berlin
www.editura.de
AG Berlin-Charlottenburg · HR B 81823 · USt.Id. DE217180548
Geschäftsführer: Ralf Szymanski
______________________________________________________________________
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/
