Sent by Jeff Chastain on 15 April 2006 14:02
Well, okay, bad example, but you get the idea. I just found another article
that said the same thing ... float all or float none. That is not a
detractor to CSS or anything ....
Thanks.
-----Original Message-----
From: [EMAIL-REMOVED]
[EMAIL-REMOVED]] On Behalf Of Els
Sent: Saturday, April 15, 2006 8:26 AM
To: Jeff Chastain; [EMAIL-REMOVED]
Subject: Re: [css-d] Nested floats and clearing?
Jeff Chastain wrote:
> I have run into this several times before, but today I cannot find a
> work-around. So, what is the "correct" behavior or proper way to
> clear a float that is nested inside of another float without clearing
> the parent float as well? Example time ...
>
> <div id="left">
> some content here ....
> </div>
> <div id="right">
> <img src="xyz.gif" class="alignLeft" />
> some content here ...
> <br class="clear" />
> some content here ...
> </div>
>
> ----------
>
> .left { width: 49%; float: left; }
> .right { width: 49%; margin-left: 50%; } .alignLeft { float: left; }
> .clear { clear: both; }
>
> ----------
>
> The problem here is that when the clear is used inside of the right
> column, it does not just clear the right column, it clears the entire
> page - messing up the two column layout.
> So, when you have a float nested within another float, how do you
> clear just the inner float?
That's not what you are having. Your <br> float isn't inside another float.
div#right isn't floated. If it were floated, the nested float would not
clear the left column.
> The code I am working on
> right now has objects floated both left and right in the right column,
> so I have to use a clear: both which wipes out the layout. Any
> suggestions?
Yup, float the right column, or don't clear the nested floats.
--
Els
http://locusmeus.com/
http://locusoptimus.com/
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org --
http://www.evolt.org/help_support_evolt/
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
