Kimi,
On Jan 17, 2007, at 4:50 PM, Kim Brooks Wei wrote:
> http://www.thewei.com/sandbox/uajx/about.php
>
> However, I still cannot get my three content boxes to line up with
> each other along a horizontal line. In fact, in several browsers
> including FF and Safari on OSX the center content box shoots right up
> into the header area. I tried separating the header from the rest of
> the content using clear: both but this didn't appear to accomplish
> anything. The center content box belongs to the flow which starts
> with the header. How can I get browsers to recognize that each the
> header and center content areas are distinct, although they are
> connected? The right and left columns are less problematic and
> render as expected in most browsers.
The #bannerbox has a height defined of 94px. The banner is an 88px
tall img + 10px padding + 1px border + room for the descenders since
images are display: inline; by default. That means the headerbox
needs to be about 104px in height to contain the banner. Since
bannerbox's height is restricted, banner overflows out the bottom
which makes it look visually taller than it really is. If you want
to see what I mean, try adding a 1px border to #bannerbox.
The solutions are to either remove the height from #bannerbox, and
set enough bottom margin to push centercontent down where you want
it, or set a large enough height to force centercontent down where
you want it.
I typically use floats for layout because they adapt well to changes
in text and window size from one browser to another. Unfortunately
you have to add ie/win specific instructions to get around its flawed
float rendering.
hth
--
Roger Roelofs
Datacomp Appraisal Services
--
Roger Roelofs
"Remember, if you’re headed in the wrong direction,
God allows U-turns!"
~Allison Gappa Bottke
__
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/