How to make the background-color cover the whole div?

Question

I am trying to add a background-color to a div that contains two more divs within it. But the background color doesn't stay all the way under the two divs.

The two divs are inside the div that i added the background to, so I thought the background should end under or beside the two divs.

.characters {
    margin: 0;
    border: 5px solid black;
    float: left;
    width: 50%;
    box-sizing: border-box;
    }

    .characters img {
    width: 100%;
    height: auto;
    display: block;
    border-bottom: 5px solid black;
    }

    .infos {
    background-color: gray;
    padding: 35px;
    text-align: center;
    }

    .infos h2, .infos h3 {
    margin: 0;
    }

    .page {
    margin-top: 35px;
    padding: 10px;
    background-color: lightgray;
    }

<div class="page">
    <div class="characters">
        <img src="pic.jpg" alt="pic" width="100px" height="100px"/>
        <div class="infos">
            <h2>text</h2>
            <h3>text</h3>
        </div>
    </div>
    <div class="characters">
        <img src="pic.jpg" alt="pic1" width="100px" height="100px"/>
        <div class="infos">
            <h2>text</h2>
            <h3>text</h3>
        </div>
    </div>
</div>

@DrJManish thank you for telling. html and css code added. is there any mistakes in them or codes that need to be added? thank you in advance! — Airi, Apr 17 '21 at 17:01

score 0 · Accepted Answer · answered Apr 17 '21 at 17:10

You need to clear the float...

One way is to apply overflow:auto to the parent.

.page {
  overflow: auto;
}

.characters {
  margin: 0;
  border: 5px solid black;
  float: left;
  width: 50%;
  box-sizing: border-box;
}

.characters img {
  width: 100%;
  height: auto;
  display: block;
  border-bottom: 5px solid black;
}

.infos {
  background-color: gray;
  padding: 35px;
  text-align: center;
}

.infos h2,
.infos h3 {
  margin: 0;
}

.page {
  margin-top: 35px;
  padding: 10px;
  background-color: lightgray;
}

<div class="page">
  <div class="characters">
    <img src="pic.jpg" alt="pic" width="100px" height="100px" />
    <div class="infos">
      <h2>text</h2>
      <h3>text</h3>
    </div>
  </div>
  <div class="characters">
    <img src="pic.jpg" alt="pic1" width="100px" height="100px" />
    <div class="infos">
      <h2>text</h2>
      <h3>text</h3>
    </div>
  </div>
</div>

score 0 · Answer 2 · answered Apr 17 '21 at 17:12

This is because of the

.characters {
float: left;
}

Property.

Just add an empty div inside the .page and add the CSS clear: both property like below.

<div class="page">
<div class="characters">
    <img src="pic.jpg" alt="pic" width="100px" height="100px"/>
    <div class="infos">
        <h2>text</h2>
        <h3>text</h3>
    </div>
</div>
<div class="characters">
    <img src="pic.jpg" alt="pic1" width="100px" height="100px"/>
    <div class="infos">
        <h2>text</h2>
        <h3>text</h3>
    </div>
   
</div>

 <div class="empty"></div>

</div>

Ans the styles are

.empty{
    clear: both;
}

.characters {
margin: 0;
border: 5px solid black;
float: left;
width: 50%;
box-sizing: border-box;
}

.characters img {
width: 100%;
height: auto;
display: block;
border-bottom: 5px solid black;
}

.infos {
background-color: gray;
padding: 35px;
text-align: center;
}

.infos h2, .infos h3 {
margin: 0;
}

.page {
margin-top: 35px;
padding: 10px;
background-color: lightgray;

}

I use this technique. It may not be the correct method but will be helpful to you. Also, remember to close the .page class div tag. :)

Cool Technique! It worked, thank you for answering! – Airi Apr 17 '21 at 17:16 — Airi, Apr 17 '21 at 17:16

score -1 · Answer 3 · answered Apr 17 '21 at 17:08

Make the .characters element lightgray, instead of the .page element:

.characters {
  margin: 0;
  border: 5px solid black;
  float: left;
  width: 50%;
  box-sizing: border-box;
  background: lightgray;
}

.characters img {
  width: 100%;
  height: auto;
  display: block;
  border-bottom: 5px solid black;
}

.infos {
  background-color: gray;
  padding: 35px;
  text-align: center;
}

.infos h2,
.infos h3 {
  margin: 0;
}

.page {
  margin-top: 35px;
  padding: 10px;
}

<div class="page">
  <div class="characters">
    <img src="pic.jpg" alt="pic" width="100px" height="100px" />
    <div class="infos">
      <h2>text</h2>
      <h3>text</h3>
    </div>
  </div>
  <div class="characters">
    <img src="pic.jpg" alt="pic1" width="100px" height="100px" />
    <div class="infos">
      <h2>text</h2>
      <h3>text</h3>
    </div>
  </div>
</div>

I mean the background (behind them too, not just the inside). Is there a way for it? — Airi, Apr 17 '21 at 17:12

How to make the background-color cover the whole div?

3 Answers3