Sent by Big John on 6 January 2003 01:01
Big John wrote:
> > I added 'heights' to #header and #menuh, and moved 'clear: both'
> > from #logo to #menuh.
Laurent wrote:
> Many thanx for your help.. Just a question. Why did u added the height to
> #header and #menuh ?
Well, in fact #menuh does not need a height. I was kinda rushed.
#header is given a height because it contains only floats, and
floats don't fill out a container unless a 'cleared' element
follows the floats. A cleared element does force the container
to enclose it, but can't be rendered until the floats are 'cleared',
thus causing the floats to be visually rendered within the
enclosing element.
Rather than stick another element in there, I just manually forced
#header to be tall enough to 'appear' to enclose the floats.
Normally I would use 'clear: both' in a div at the end of #header,
but this might add a small extra (unwanted) vertical space. Since the
following #menuh is now cleared, and the floats in #header are on one
line, all that remained was to 'draw down' the #header BG to the
bottom edge of the floats (or just a bit lower, in the case of Op6).
Warning: this might not work in older browsers; if they must be
supported, use a cleared element. (<div> or <br>)
BTW, IE incorrectly encloses floats even if there is no cleared
element within the enclosing element. Microsoft sure wants to
'help' us, don't they? Adhering to the standards seems to be
way down the priority list. But they're big and powerful, so
they get away with it, only obeying the W3C specs when it
suits them, despite being a W3C member. But I digress...
HTH
Big John
=====
^-^-^-^-^-^-^-^-^-^-^-^-^-^-^-^-^-^-^-^-^-^-^-^-^-^-^-^-^-^-^-^-^-^-^-
| Perennial student + Impractical joker + CSS junkie = Big John |
| XXXX <http://users.rraz.net/mc_on_the_rocks/testpage/pie.html> XXXX |
| XXXXXXXXXXXXX <http://users.rraz.net/mc_on_the_rocks/> XXXXXXXXXXXX |
-^-^-^-^-^-^-^-^-^-^-^-^-^-^-^-^-^-^-^-^-^-^-^-^-^-^-^-^-^-^-^-^-^-^-^
__________________________________________________
Do you Yahoo!?
Yahoo! Mail Plus - Powerful. Affordable. Sign up now.
http://mailplus.yahoo.com
