Home/ Questions/Q 8657757
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T15:36:03+00:00

My css code: #header { width:900px; border:dashed 1px; margin:5px; padding:2px; } #header .fl_left {

  • 0

My css code:

#header
{
width:900px;
border:dashed 1px;
margin:5px;
padding:2px;
}
#header .fl_left
{
float:left;
display:block;
width:260px;
}
#header .fl_left h1
{
float:left;
background-color:#666633;
color:#0033CC;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-style:oblique;
}

My html code:

<body>
<div id="header"><div class="fl_left"> <h1>hello all</h1> </div></div>
</body>
</html>

I get the output ‘hello all’ outside header. My intention is to put h1 element text inside header.

Why the header id rule is not applied to my h1 element.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The #header selector only applies to the header element iself, not its children, and there is nothing in the style that would be inherited by the children.

    The reason that the text ends up outside the header is that the header only contains floating elements which don’t take up space, so they don’t affect the height of the header.

    You can add overflow: hidden to the header to make it contain its children:

    #header {
    width:900px;
    border:dashed 1px;
    margin:5px;
    padding:2px;
    overflow: hidden; }
    • 0