Thank your advice. I modified my code to: <div id="header"> ...
<div style="clear:both;"></div> </div> but it has no effect. Is it because the header div consists only of floated blocks? I uses Firefox 1.5. On 5/14/06, Philippe Wittenbergh <[EMAIL PROTECTED]> wrote: > > > On May 14, 2006, at 10:16 AM, ray wrote: > > > I write the following code: > > xhtml: > > <body> > > <div id="header"> > > <h1>Welcome to site</h1> > > <div> > > <a href="">site in English</a> > > hello,please <a href="">login</a> or <a > > href="">register</a> > > </div> > > </div> > > </body> > > > > css: > > #header { > > background-color: #FFE4B5; > > } > > #header h1 { > > float: left; > > margin: 0; > > } > > #header div { > > float: right; > > } > > > > The problem is that the header div's background color is not > > displayed. It > > found that it's height is zero, and padding is also zero. I refer > > to CSS2 > > specification, it says that height's default value is auto. I think > > it means > > that the height depends on its content's height, i.e. the h1 and div's > > height in this case. I don't want to specify the height explictly. > > What's > > wrong with me? How can I solve it? TIA. > > The height is 0 because the contents of your #header consists only of > floated blocks. Those are by definition removed from the flow, and > have no effect on the height of your #header div. > > I guess you want that #header to show that background colour. You'll > need to clear the floats inside it, force that #header to stay 'open'. > Here is a good solution: > <http://www.positioniseverything.net/easyclearing.html> > > Philippe > --- > Philippe Wittenbergh > <http://emps.l-c-n.com> > > > > > ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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/