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 PROTECTED] 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/
