What is the wrong with my CSS code?

Question

I am building an theme with html and css but not working. Why the background color is not showing ? What is the wrong CSS code? I cannot find the error that is making problem. Can anyone help me to fix it?

header {
  background-color: blue;
}
#main-header {
  width: 1170px;
  margin: 0 auto;
}
#main-header h1 {
  float: left;
}
#main-header nav {
  float: right;
}

<header>
  <section id="main-header">
    <h1>SITE NAME</h1>
    <nav>
      <ul>
        <li>HOME</li>
        <li>ABOUT</li>
        <li>SERVICE</li>
        <li>PORTFOLIO</li>
        <li>CONTACT</li>
      </ul>
    </nav>
  </section>
  <section>
  </section>
</header>

**Clear** your floats... http://css-tricks.com/all-about-floats/ — DaniP, Dec 09 '14 at 16:34
Daib, read this http://stackoverflow.com/questions/9599811/why-have-empty-content-on-css-after#answer-9599964 in answer to your question below — chazsolo, Dec 09 '14 at 16:58

score 2 · Answer 1 · answered Dec 09 '14 at 16:37

2

You need to clear the floating elements. This means you have to put an element with clear:both CSS property after your floating ones. I recommend using the ::after pseudo selector:

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

This will automatically clear your floats without requiring you to create additional elements.

answered Dec 09 '14 at 16:37

John Weisz

30,137
13
89
132

What is content: **' ';** ?? – Daib Dec 09 '14 at 16:54
1

Content is necessary to give a "body" to pseudo-elements (such as `::after`), otherwise they won't render. https://developer.mozilla.org/en-US/docs/Web/CSS/content – Shomz Dec 09 '14 at 16:59

score 2 · Answer 2 · answered Dec 09 '14 at 16:39

2

You can use overflow css property (auto, for example) to clear the float height effect :

header { overflow:auto; }

JSFiddle

answered Dec 09 '14 at 16:39

potashin

44,205
11
83
107

Giacomo Paita · Answer 3 · 2014-12-09T23:19:15.130

Since your container contains floating element, its height is equal to zero, unless you will set the height or min-height via CSS, that is not an optimal solution. Below are explained all the known solutions to clear floating elements:

The safe and traditional manner: float (all!) container(s)

In this case, you make all the containers of the floating element likewise floating itself, and setting the width, like this:

header {
 background-color: blue;
 float:left;
}

#main-header nav {
  float: right;
  background:red;
  width:50%
}

Live example

The pitfall is that it affects the layout, you have to handle it applying the float to all parents, endless waterfall-like CSS ensues...

The backward-looking way: clear with non-semantic element

You can clear the float inserting a void element before the closing tag of the parent, like this:

  [CSS]
   .clear-all {clear:both;}

  [HTML]
  <header>
   .....
   <span class="clear-all"></span>
  </header>

The pitfall is that the span element, or whatever, is not semantic.

The quick and dirty way: Overflow: hidden

Setting overflow: hidden to the parent/container, it makes it to define its boundaries. The pitfall is that if your layoud must have element the overlap the container, you can't afford it.

The modern way: clearfix:after

By reading this Css-tricks article, you can learn that:

The Easy Clearing Method uses a clever CSS pseudo selector (:after) to clear floats. Rather than setting the overflow on the parent, you apply an additional class like "clearfix" to it. Then apply this CSS:

.clearfix:after { 
   content: "."; 
   visibility: hidden; 
   display: block; 
   height: 0; 
   clear: both;
 }

That is in my opinion the best, concise, restrained way to clear floats.

score 1 · Answer 4 · answered Dec 09 '14 at 16:37

Because you don't have any unfloated element to "build" the height inside the header, and the height is not specifically defined.

Here's what happens when you define it:

header {
  background-color: blue;
  height: 150px;
}
#main-header {
  width: 1170px;
  margin: 0 auto;
}
#main-header h1 {
  float: left;
}
#main-header nav {
  float: right;
}

<header>
  <section id="main-header">
    <h1>SITE NAME</h1>
    <nav>
      <ul>
        <li>HOME</li>
        <li>ABOUT</li>
        <li>SERVICE</li>
        <li>PORTFOLIO</li>
        <li>CONTACT</li>
      </ul>
    </nav>
  </section>
  <section>
  </section>
</header>

score 0 · Answer 5 · answered Dec 09 '14 at 16:46

0

You can do the following Two options:

header { 
 ...
 overflow:auto; 
 min-height:10px; /*or what vere you thing would be ideal for default*/

}

answered Dec 09 '14 at 16:46

saqibahmad

962
1
9
18

Darko · Answer 6 · 2014-12-09T16:58:09.480

You are using floating elements, so the parent element, in this case header, will have a zero height value, what you need to do is to add another element to clear the floats, for example like this:

One more thing, defining a header height will also solve the problem, but it's a bad practice, especially if you are dealing with responsive layouts, or if you need to add or remove some content inside header latter.

header {
  background-color: blue;
}
#main-header {
  width: 1170px;
  margin: 0 auto;
}
#main-header h1 {
  float: left;
}
#main-header nav {
  float: right;
}
.clearfix {
  clear:both;
}

<header>
  <section id="main-header">
    <h1>SITE NAME</h1>
    <nav>
      <ul>
        <li>HOME</li>
        <li>ABOUT</li>
        <li>SERVICE</li>
        <li>PORTFOLIO</li>
        <li>CONTACT</li>
      </ul>
    </nav>
  </section>
  <section>
  </section>
  <div class="clearfix"></div>
</header>