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/

Reply via email to