Hi I am having trouble with div in two places on my site. One is when I resize the browser in FF the content floats underneath my left menu instead of breaking (which is what I would reather have). Two whenever I try to contain my top menu in a div to center it and add background color, FF acts as if the div contains no content. Please offer any advice the site is www.studentloanrelief.org thanks!
I didn't see/understand(?) the first issue. The second derives from a lack of understanding of just how floats work. It is not particularly intuitive The ul#mainlevel has no height, since its only content are the float list items. That means div#moduletable is zero height also. You need to cause either the div or the ul to enclose its float descendents. There are basically four methods. You may use the overflow, display or float properties, or you may use something like Tony Aslett's clearfix hack. Each method has its own set of gotchas, so it is well that you become familiar with them all. At least one method will work well for a given case. I have made a demo using each method, 'Enclosing float elements'. cheers, gary
i fixed the first issue by fixing the left column width. yeah your write i guess i dont understand how float works. it is still confusing after reading everything. so a div containing a float has no height. hope i can figure this out. btw that is a very nice demo and explanation. did you just make that?
Thanks. Yeah, I made it because the technical reasons for the display and overflow properties working as they do are complex and difficult, for me at least, to explain. I figured examples would pretty much do the job for practical purposes. Floats are kinda hybrid animals. They are not in the flow, and thus invisible to other block level elements. Inline elements, however, are aware of them![1] See Max Design's Floatutorial for a good look at floats. cheers, gary [1] IE7-B2, while fixing some egregious float model bugs, has introduced new bugs that will be unbelievably ugly.
Hi, You can sum it up fairly succinctly: Float sets a block to be positioned as an inline but either set left or set right. Floats are not included, when calculating the height of the parent element. You cannot change a float's position/sizing calculation algorithm, but you can force another element to not overlap with a float by using the clear property. On an element, clear left, right, or both, will control whether or not a floating element can be shown above that element. - P