Sent by Zoe M. Gillenwater on 28 July 2006 16:04
Bill Walton wrote:
> Hi Gunlaug,
>
> First of all, thanks! That works. Now...
>
> Gunlaug Sørtun wrote;
>
>>> I could use some help figuring out why the right column won't come up
>>> against the main one but rides underneath instead.
>>>
>>> http://www.emrec-beta1.com
>>>
>> That's how floats work - right_col can't float upwards past the
>> non-floating main.
>>
>
> But main can 'float' to the top between left_col and right_col?
Main isn't floating. It's wrapping around the other floats. It's the
non-floated content that rises up to wrap around a float.
Think of it this way. Let's say your source order was back to leftcol,
maincol, rightcol (I recommend you actually work through my example as a
learning exercise). Now lets say you don't have any CSS on them at all.
How will they display? The leftcol will display first, then the maincol
will be below it, then the rightcol will be below that, all three
stacked. When you add a float value, all you do is tell the div to move
to the left or the right. You don't tell it to move up. So let's say you
float leftcol left and give it a width. It doesn't move up at all. But
maincol moves up beside it. And righcol is still beneath maincol. Now
let's say you float rightcol right and give it a width. It doesn't move
up -- it stays beneath maincol, just moves to the right side of the
screen. This is exactly what leftcol did -- stayed at the same vertical
level, just moved over horizontally. Floating moves items over, not up.
The static content adjacent to the floats can move up to wrap around them.
So that's why you need to put both floats before maincol in the source
(change the HTML back to leftcol, rightcol, maincol, and remove all the
CSS and do the exercise I outlined above over again to see the new
source order in action). Does this make sense now?
> What would
> you recommend I study in order to understand this? It is, to me, very
> counter-intuitive. I need something in "plain english".
>
Actually, it's not counter-intuitive. I think you're just overthinking
it. Float left moves an item to the left, not up, not down. Float right
moves an item to the right, not up, not down. That's an
oversimplification, but that's the basic idea. Make sense?
>> For that kind of 'float/non-float' layout to work, you'll have to change
>> the order in the source-code (HTML) so it becomes...
>>
>
> I know this must be related to my earlier question re: understanding what
> 'normal page flow' means. I haven't made it through everything Zoe
> recommended, though. So maybe the answer already awaits!
>
Yes, I think you will find that it does. :-)
>> ...and keep the CSS as is.
>>
>
> Is there an easy way to keep the HTML as is and change the CSS to achieve
> the same result? I mean, changing the order of the HTML wasn't intuitive,
> but it <em> was </em> easy.
>
Hopefully my explanation has made changing the HTML intuitive. But yes,
there is a way to keep the main content first in the source and have the
floats come later. The issue is that I think this is beyond your level.
Get a good understanding of page float and floating first, then you can
move on to more advanced layout techniques.
Zoe
--
Zoe M. Gillenwater
Design Services Manager
UNC Highway Safety Research Center
http://www.hsrc.unc.edu
______________________________________________________________________
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/
