It took me a minute to figure out what you were asking - but once I popped the hood, it makes sense.
Floating an element takes it out of the normal flow of the document. In the case of your navigation bar (on the left), you have 4 nearly-identical speced elements (ie same size, proportions, etc.) each one having a class "navigation." The rules about where an element floats *to* in any given document can be pretty complicated. But the simple explanation is that they float relative to their containing element. Since all of these navigation divs have the same containing element (in this case, the "body" element), AND because there's no room for them to cozy up next to each other in order (because they're width is costrained) they're all going to float to the same location. Notice that the last navigation bar (the one with its color set to green) is the one on top, as you'd expect). The important part is that first one, though: a floated element is taken out of the normal flow of the document. They can be contained in a couple of ways; one of the simplest (but sometimes problematic) solutions is to also float whichever element you want to be the container for the box in question. For a good float tutorial, check out Eric Meyer's CSS: The Definitive Guide<http://www.amazon.com/CSS-Definitive-Guide-Eric-Meyer/dp/0596527330/sr=8-1/qid=1164918709/ref=pd_bbs_sr_1/105-5469553-7720434?ie=UTF8&s=books>. It has the best explanation of floating behavior I've seen. Personally, negative margin layouts make my head hurt. On 11/30/06, mean dspt <[EMAIL PROTECTED]> wrote: > > Hi, I was experimenting with layouts from Layout Gala > http://blog.html.it/layoutgala/ > it uses exessively negative margins and floats for layouts. I've > modified one of the layouts, and added some new divs. The sample page > is there http://pmplus.org/layout7.html You can notice the side > columns are strangely rendered. > I can't understand the behaviour of .navigation and .extra divs. Why > are they stacked one over each other, instead of running one beneath > another? there's no absolute or relative positioning used... > What rules make them overlap? > > Yegor > ______________________________________________________________________ > css-discuss [EMAIL PROTECTED] > http://www.css-discuss.org/mailman/listinfo/css-d > IE7 information -- 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 PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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/
