Re: [css-d] third column riding below
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? What would you recommend I study in order to understand this? It is, to me, very counter-intuitive. I need something in plain english. 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! ...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. Thanks again, Bill __ 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/
Re: [css-d] third column riding below
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/
Re: [css-d] third column riding below
Bill Walton 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? What would you recommend I study in order to understand this? It is, to me, very counter-intuitive. I need something in plain english. Main isn't floating, so it can flow in/up to occupy any space left alongside floats that are placed *before it* in the source-code. Floats OTOH can not go any higher than the non-floating element/content that's preceding it. 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! I sure hope so. If not, then it should :-) Noticed that Zoe says it does, so just read on ;-) The basics of 'normal page flow' is the order the elements and their content get when there's *no* CSS (and no tables). Once you start positioning or floating elements, you are taking them out of the 'normal flow', thus affect the way they interact with, or completely ignore, other elements. For quick-checks of '_all_ normal page flow': turn off CSS in your browser, or open your site so your pages can be viewed in Lynxview... http://www.delorie.com/web/lynxview.html FYI: I always organize my source-code (HTML) so the content makes good sense on this level - in Lynx - before even thinking about designing anything with CSS. I also check at the end of the design-process that I haven't messed anything up at this non-CSS level. 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. Well, I don't think your HTML will survive completely untouched, but there are quite a few options that'll let you keep the containers/columns in almost any order. I base most of my layouts on methods similar to 'negative margins'... http://www.alistapart.com/articles/negativemargins/ ...which is a good start for learning about 'all-float' layouts. Something for a later study, maybe. regards Georg -- http://www.gunlaug.no __ 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/
[css-d] third column riding below
Hi,
I could use some help figuring out why the right column won't come up against
the main one but rides underneath instead. The page is at
http://www.emrec-beta1.com The stylesheet is internal. Thanks much for any
help.
Best regards,
Bill
stylesheet definitions
#left_col {
float: left;
background-color: #fcc;
width: 9em;
position: relative;
}
#main {
margin-left: 9em;
margin-right: 10em;
padding-top: 1ex;
padding-left: 1em;
padding-right: 1em;
background: white;
border-left: medium solid red;
border-right: medium solid red;
position: relative;
}
#right_col {
float: right;
background-color: #fcc;
width: 9em;
position: relative;
}
__
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/
Re: [css-d] third column riding below
Bill Walton 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. 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... - banner - topnav - left_col - right_col - main - footer ...and keep the CSS as is. Georg -- http://www.gunlaug.no __ 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/
