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/
