Why div tag not reading mentioned class?

Question

I want my div tags to have different background color than body background color but my browser only shows first div color changed not second one. why?

body {
  background-color: Linen;
}

.names {
  background-color: Yellow;
}

.title {
  background-color: rgb(255, 0, 0)
}

<!doctype html>
<html>

<head>
  <title>Our Blog</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>

  <div class="title">
    <h1 align="center">O</h1>
  </div>

  <div class="names">
    <h2 style="float: left">M</h2>
    <h2 style="float: right">F</h2>
  </div>

</body>

</html>

But output is showing just first div background-color change not the second one

score 2 · Accepted Answer · answered Oct 29 '20 at 10:50

2

It's not that the names container has no background colour, it's that it has no height:

.names {
  background-color: Yellow;
  border: solid 1px green;
}

<!doctype html>
<html>

<body>

  <div class="names">
    <h2 style="float: left">M</h2>
    <h2 style="float: right">F</h2>
  </div>

</body>

</html>

It only has floated children, and they don't contribute to the height of the parent. Unless you explicitly do something, like telling the parent to prevent overflow:

.names {
  background-color: Yellow;
  overflow: hidden;
}

<!doctype html>
<html>

<body>

  <div class="names">
    <h2 style="float: left">M</h2>
    <h2 style="float: right">F</h2>
  </div>

</body>

</html>

answered Oct 29 '20 at 10:50

deceze

510,633
85
743
889

no man. name class still not changing color – Roohullah Kazmi Oct 29 '20 at 10:57
Did you click the "Run code snippet" in my answer…? – deceze Oct 29 '20 at 10:59
yes it worked here but when i do same in my code the background-color of above div encapsulates the name class div – Roohullah Kazmi Oct 29 '20 at 11:08

Why div tag not reading mentioned class?

1 Answers1