Why background color is not applying to DIV container?

Question

I am trying to apply background color over the DIV element. Since the DIV's children are floating left, I assume both the children are in the DIV container.

But If I add position: absolute to DIV container, I could see the result as expected. But still, I don't understand it, what difference does it makes with absolute position.

<style>
        span {
          float: left;
          padding: 10px;
        }
        div {
          border: 1px solid #ccc;
          background-color: yellow;
          left: 200px;
        }

</style>
<div>
    <span>Span A</span>
    <span>Span B</span>
</div>

for the position:absolute part it's here : *Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, and block boxes with 'overflow' other than 'visible' (except when that value has been propagated to the viewport) establish new block formatting contexts for their contents.* https://www.w3.org/TR/CSS2/visuren.html#block-formatting .. so it's like `overflow:hidden` it establish a new **block formatting contexts** (you can make the div float also and it will work lik position:absolute) — Temani Afif, Jun 26 '19 at 08:16
^ in the duplicates you will find many answer talking about **block formatting contexts** which is the key of clearing float (in addtion to the clear property) — Temani Afif, Jun 26 '19 at 08:23
Thank you for the explanation. It really helped me. But, this question doesn't seems to be duplicate of the one you have marked it. My question was with respect to position: absolute; — Rohit Sharma, Jun 26 '19 at 08:37
the duplicate are more generic and explain the clear thing. Position:absolute is one particular case, so I think better understand this in general than simply one case. — Temani Afif, Jun 26 '19 at 08:45

Sai Manoj · Answer 1 · 2019-06-26T06:43:57.480

In your case you floated them to float:left, you didn't apply height for that<div>. I would suggest you to use display:inline-block for <span> so that they will be aligned inline with block size. No need to use floats in this case

By default span has display:inline property

Using floats.Solution for your code.

span {
  float: left;
  padding: 10px;
}

div {
  border: 1px solid #ccc;
  background-color: yellow;
  left: 200px;
  height:100px
}

<div>
  <span>Span A</span>
  <span>Span B</span>
</div>

You can do this using display:inline-block rather than using float

span {
  display:inline-block;
  padding: 10px;
}

div {
  border: 1px solid #ccc;
  background-color: yellow;
  left: 200px;

}

<div>
  <span>Span A</span>
  <span>Span B</span>
</div>

Daan · Answer 2 · 2019-06-26T06:44:24.280

1

Your div has a background color, but because the spans have a float set, their parent doesn't take their width/height: it now has no width and height.

Instead of float: left, you probably wanted to use: display: inline-block on the span elements. Like so:

span {
  padding: 10px;
  display: inline-block;
}
div {
  border: 1px solid #ccc;
  background-color: yellow;
  left: 200px;
}

<div>
  <span>Span A</span>
  <span>Span B</span>
</div>

Another solution is to give the parent div the property display: table. Because the parent will then get the width/height of it's children (unless it's absolutely positioned). Like so:

span {
  padding: 10px;
  float: left;
}
div {
  border: 1px solid #ccc;
  background-color: yellow;
  display: table;
}

<div>
  <span>Span A</span>
  <span>Span B</span>
</div>

edited Jun 26 '19 at 06:44

answered Jun 26 '19 at 06:31

Daan

2,680
20
39

thank you for your wonderful explanation. I was just trying to know the logic behind this. – Rohit Sharma Jun 26 '19 at 06:35
You're welcome. It's also useful to know the default "browser styles" of elements. `display: inline` is the default style for `
` elements. You can simply check this with your browser's Developer Tools. Click on the element, go to the "Computed" styles tab and make sure "Browser styles" or "Show all" is enabled.
– Daan Jun 26 '19 at 06:41

AeJey · Answer 3 · 2019-06-26T08:37:03.617

0

Remove float left from span as the span tag is of display: inline by default and there is no fixed width applied for span.

<style>

    span {
      padding: 10px;
    }
    div {
      border: 1px solid #ccc;
      background-color: yellow;
      left: 200px;
    }

</style>

    <div>
      <span>Span A</span>
      <span>Span B</span>
    </div>

edited Jun 26 '19 at 08:37

answered Jun 26 '19 at 06:31

AeJey

1,447
20
40

score -1 · Answer 4 · answered Jun 26 '19 at 06:34

You are missing the height and width attribute for div tag

<style>

span {
  float: left;
  padding: 10px;
}
div {
  border: 1px solid #ccc;
  background-color: yellow;
  left: 200px;
  height: 100px;
  width: 300px
}

</style>

  <div>
    <span>Span A</span>
    <span>Span B</span>
  </div>

Why background color is not applying to DIV container?

4 Answers4

Related