background-color defined in parent and its child, nither of them succeed

Question

Having this html:

        body {
            font-family: Arial, Helvetica, sans-serif;
        }

        header {
            background-color: rgb(93, 43, 78);
            background-image: -webkit-linear-gradient(right, rgb(93, 43, 78), rgb(8, 2, 50)); /* no color in background */
        }

        header nav {
            background-color: red; /* neither here, still white background */
        }

        header ul {
            list-style: none;
        }

        header li {
            float: left;
            color: black;
        }

        p {
            clear: both;
        }

<html>
<body>
    <header>
        <nav>
            <ul>
                <li>test item1</li>
                <li>test item2</li>
            </ul>
        </nav>
    </header>
    <section>
        <br />
        <p>some text</p>
    </section>
</body>
</html>

I am not able to see background nither for the header parent element, nor for the nav child element (of the header). Both are trying to make a background with some color or effect, but neither of them succeed. Why?

score 1 · Accepted Answer · answered Sep 02 '20 at 14:06

This is one of the problems with using float... it takes the element out of the flow so the parent have no content and therefore no height. The workaround is the "clearfix" hack - basically, it forces the parent to take the height of its children.

You can create a clearfix class and apply it to the parent of any floated elements:

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

Expand to see a working example:

body {
  font-family: Arial, Helvetica, sans-serif;
}

header {
  background-color: rgb(93, 43, 78);
  background-image: -webkit-linear-gradient(right, rgb(93, 43, 78), rgb(8, 2, 50));
  /* no color in background */
}

header nav {
  background-color: red;
  /* neither here, still white background */
}

header ul {
  list-style: none;
}

header li {
  float: left;
  color: black;
}

p {
  clear: both;
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

<html>

<body>
  <header>
    <nav class="clearfix">
      <ul>
        <li>test item1</li>
        <li>test item2</li>
      </ul>
    </nav>
  </header>
  <section>
    <br />
    <p>some text</p>
  </section>
</body>

</html>

Flexbox - a modern alternative to float

However a better options these days is to use flexbox - you can achieve a similar effect but without the hack, and it is also more flexible (as the name suggests!)

You just need to make the direct parent of the elements (in this case the ul) display: flex and it will automatically place the elements into the available space horizontally, e.g.

Simple Flexbox example using your code

body {
  font-family: Arial, Helvetica, sans-serif;
}

header {
  background-color: rgb(93, 43, 78);
  background-image: -webkit-linear-gradient(right, rgb(93, 43, 78), rgb(8, 2, 50));
  /* no color in background */
}

header nav {
  background-color: red;

}

header ul {
  list-style: none;
  display: flex;
}

header li {
  color: black;
}

p {
  clear: both;
}

<html>

<body>
  <header>
    <nav>
      <ul>
        <li>test item1</li>
        <li>test item2</li>
      </ul>
    </nav>
  </header>
  <section>
    <br />
    <p>some text</p>
  </section>
</body>

</html>

This is just the tip of the iceberg when it comes to the abilities of flexbox. Take a look at the references below to see what you can do!

More about flexbox

What does mean `display: table`? I know only display block, inline-block or inline. What is table here? — milanHrabos, Sep 02 '20 at 14:26
@milanHrabos Normally you can `display:table` it to organise non-table contents to display as a table (you can [find out more here](https://colintoh.com/blog/display-table-anti-hero)), but in this case it is doing nothing except making the clearfix hack work, so you can ignore it! You can see [more about the display types here](https://css-tricks.com/almanac/properties/d/display/) — FluffyKitten, Sep 02 '20 at 14:36

score 0 · Answer 2 · answered Sep 02 '20 at 13:58

0

Your header doesnt seem to have a set height.

Try adding for example height: 30%; to your css in header{}.

For example:

header   {
background-color: red;
height: 30%;
}

answered Sep 02 '20 at 13:58

Jorn Barkhof

264
1
16

score 0 · Answer 3 · answered Sep 02 '20 at 13:59

0

Use div instead of header. Then you will se the result.

<div>
test text 
</div>

div {
  background-color: lightblue;
}

answered Sep 02 '20 at 13:59

Norbert Molnar

101
3

score 0 · Answer 4 · answered Sep 02 '20 at 14:00

You are using floats in the li element. This means the height of its parent doesn't grow to fit. The colours are there just not visible due to no height.

        body {
            font-family: Arial, Helvetica, sans-serif;
        }

        header {
            padding: 10px;
            background-color: rgb(93, 43, 78);
            background-image: -webkit-linear-gradient(right, rgb(93, 43, 78), rgb(8, 2, 50)); /* no color in background */
        }

        header nav {
            background-color: red; /* neither here, still white background */
        }

        header ul {
            list-style: none;
        }

        header li {
            color: black;
        }

        p {
            clear: both;
        }

<html>
<body>
    <header>
        <nav>
            <ul>
                <li>test item1</li>
                <li>test item2</li>
            </ul>
        </nav>
    </header>
    <section>
        <br />
        <p>some text</p>
    </section>
</body>
</html>

But I want them to float, otherwise the items look like boxes — milanHrabos, Sep 02 '20 at 14:25

background-color defined in parent and its child, nither of them succeed

4 Answers4

Flexbox - a modern alternative to float