why isn't the color I added on the header background visible?

Question

Trying to apply a background color to my header but why isn't the #header background color visible? I tried

header { background: grey; width: 100%; margin: 0 auto }

I also tried diffrent colors but it doesn't seem to be working. I'm new to this field so any help will be appreciated. I attached the html and css codes.

* {
  margin: 0 auto
}

#slogan {
  background: #063540;
  color: white;
  padding: 20px;
  font-family: 'Open Sans', sans-serif;
  font-size: small;
  width: 100%;
  padding-left: 8%;
}

#header {
  background: grey;
  width: 100%;
  margin: 0 auto
}

a {
  text-decoration: none;
}

#logo a {
  color: #063540;
}

#logo {
  float: left;
  padding-left: 8%;
  color: #063540;
  margin-top: 20px;
}

.navbar {
  float: right;
  top: 0px;
  padding-right: 20%;
  margin-top: 20px;
}

.navbar a {
  padding-left: 25px;
  color: #063540;
  font-size: 14pt;
}

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
    <title>MyWebsite</title>
</head>

<body>
    <p id="slogan">We are creative agency</p>
    <div id="header">
        <div id="logo">
            <a href="/">
                <h1>MyWebsite</h1>
            </a>
        </div>
        <div class="navbar">
            <a href="/">Home</a>
            <a href="/">About</a>
            <a href="/">Services</a>
            <a href="/">Projects</a>
            <a href="/">Pages</a>
            <a href="/">Blog</a>
            <a href="/">Contact</a>
        </div>
    </div>
</body>
</html>

Manish Patel · Accepted Answer · 2017-10-10T13:06:19.407

It because you have floating element in your header so you need to clear the float element.

The problem happens when a floated element is within a container box, that element does not automatically force the container’s height adjust to the floated element. When an element is floated, its parent no longer contains it because the float is removed from the flow.

Please refer this link for more understanding.

#header:before, #header:after {
    content: "";
    clear: both;
    display: table;
}

*{
  margin: 0 auto
}
#slogan {
  background: #063540;
  color: white;
  padding: 20px;
  font-family: 'Open Sans', sans-serif;
  font-size: small;
  width: 100%;
  padding-left: 8%;
}

#header {
  background: grey;
  width: 100%;
  margin: 0 auto
}
#header:before, #header:after {
  content: "";
  clear: both;
  display: table;
}
a {
  text-decoration: none;
}

#logo a {
  color: #063540;
}

#logo {
  float: left;
  padding-left: 8%;
  color: #063540;
  margin-top: 20px;
}

.navbar {
  float: right;
  top: 0px;
  padding-right: 20%;
  margin-top: 20px;
}

.navbar a {
  padding-left: 25px;
  color: #063540;
  font-size: 14pt;
}

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
    <title>MyWebsite</title>
</head>

<body>
    <p id="slogan">We are creative agency</p>
    <div id="header">
        <div id="logo"><a href="/"><h1>MyWebsite</h1></a></div>
        <div class="navbar">
            <a href="/">Home</a>
            <a href="/">About</a>
            <a href="/">Services</a>
            <a href="/">Projects</a>
            <a href="/">Pages</a>
            <a href="/">Blog</a>
            <a href="/">Contact</a>
        </div>
    </div>
</body>
</html>

Or more precisely, because _all_ the content in #header is floating. Any non-floating content would contribute to the height. — Mr Lister, Oct 10 '17 at 13:01

Ehsan · Answer 2 · 2017-10-10T13:12:30.370

All elements inside #header are float, so #header get out of normal flow of document.

Method 1)

#header:after {
    content: '';
    display: block;
    clear: both;
}

            * { 
        margin: 0 auto
        
    }
    
    #slogan {
        background: #063540;
        color: white;
        padding: 20px;
        font-family: 'Open Sans', sans-serif;
        font-size: small;
        width: 100%;
        padding-left: 8%;
         
        
    }
    
    #header {
        background: grey;
        width: 100%;
        margin: 0 auto;

        }
        #header:after {
            content: '';
            display: block;
            clear: both;
        }
    
    a {
        text-decoration: none;
        
    }
    #logo a {
        color: #063540;
        
    }
    
    #logo {
        float: left;
        padding-left: 8%;
        color: #063540;
        margin-top: 20px;
        
    }
    
    .navbar {
        float: right;
        top: 0px;
        padding-right: 20%;
        margin-top: 20px;
        
        
    }
    
    .navbar a {
        padding-left: 25px;
        color: #063540;
        font-size: 14pt;
        
        
        
    }

<p id="slogan">We are creative agency</p>

 <div id="header">
 
  
 
  <div id="logo"><a href="/"><h1>MyWebsite</h1></a></div>
 
  <div class="navbar">
   <a href="/">Home</a>
   <a href="/">About</a>
   <a href="/">Services</a>
   <a href="/">Projects</a>
   <a href="/">Pages</a>
   <a href="/">Blog</a>
   <a href="/">Contact</a>
  </div>
  
 </div>

Method 2)

Insert <br style="clear: both"> to html code:

            * { 
        margin: 0 auto
        
    }
    
    #slogan {
        background: #063540;
        color: white;
        padding: 20px;
        font-family: 'Open Sans', sans-serif;
        font-size: small;
        width: 100%;
        padding-left: 8%;
         
        
    }
    
    #header {
        background: grey;
        width: 100%;
        margin: 0 auto;

        }

    a {
        text-decoration: none;
        
    }
    #logo a {
        color: #063540;
        
    }
    
    #logo {
        float: left;
        padding-left: 8%;
        color: #063540;
        margin-top: 20px;
        
    }
    
    .navbar {
        float: right;
        top: 0px;
        padding-right: 20%;
        margin-top: 20px;
        
        
    }
    
    .navbar a {
        padding-left: 25px;
        color: #063540;
        font-size: 14pt;
        
        
        
    }

<p id="slogan">We are creative agency</p>

 <div id="header">
 
  
 
  <div id="logo"><a href="/"><h1>MyWebsite</h1></a></div>
 
  <div class="navbar">
   <a href="/">Home</a>
   <a href="/">About</a>
   <a href="/">Services</a>
   <a href="/">Projects</a>
   <a href="/">Pages</a>
   <a href="/">Blog</a>
   <a href="/">Contact</a>
  </div>
  <br style="clear: both">
 </div>

score 0 · Answer 3 · edited Oct 10 '17 at 13:12

That is happening because the children from the header have float property, when an element has float property, they are actually not rendered as a block element https://stackoverflow.com/a/16568504/2894798 That's why by default your header has height 0, so to fix it I would add a clear fix property,

* { 
  margin: 0 auto;
}

#slogan {
  background: #063540;
  color: white;
  padding: 20px;
  font-family: 'Open Sans', sans-serif;
  font-size: small;
  width: 100%;
  padding-left: 8%;
}

#header {
  background: grey;
  width: 100%;
  margin: 0 auto;
}

a {
  text-decoration: none;
}

#logo a {
  color: #063540;
}

#logo {
  float: left;
  padding-left: 8%;
  color: #063540;
  margin-top: 20px;
}

.navbar {
  float: right;
  top: 0px;
  padding-right: 20%;
  margin-top: 20px;
}

.navbar a {
  padding-left: 25px;
  color: #063540;
  font-size: 14pt;
}

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
    <title>MyWebsite</title>
</head>

<body>
    <p id="slogan">We are creative agency</p>
    <div id="header">
        <div id="logo"><a href="/"><h1>MyWebsite</h1></a></div>
        <div class="navbar">
            <a href="/">Home</a>
            <a href="/">About</a>
            <a href="/">Services</a>
            <a href="/">Projects</a>
            <a href="/">Pages</a>
            <a href="/">Blog</a>
            <a href="/">Contact</a>
        </div>
        <div style="clear:both;">
        </div>
</body>
</html>

why isn't the color I added on the header background visible?

header { background: grey; width: 100%; margin: 0 auto }

3 Answers3