HTML Background not showing

Question

I'm practicing this simple code and when I try to put a background on my P behind them using the (div) element its not showing why is that? What I want is for the div { background-color: purple; } covers all my `(p) section.'

My code

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">

    <title>Boxes</title>
<h1 align="center">My Boxes</h1>


<style>

div {
    background-color: purple;

}


p { width: 50px;
    height: 50px;
    border: 2px solid black;
    margin-bottom: 10px;
    margin-right: 10px;
    float:left;
}
h1 {margin-bottom: 80px;
}

* {box-sizing: border-box;
margin: 0;
padding: 0;}

#box1   {background-color: yellow;




}
#box2   {background-color: red;


}
#box3   {background-color: blue;
    clear:left; 

}
#box4   {background-color: green;}



</style>
</head> 

<body>
<div>

<p id="box1"> </p>
<p id="box2"> </p>
<p id="box3"> </p>
<p id="box4"> </p>  

</div>


</body>
</html>

This is because you have added `float: left` to your `p` which makes the elements float inside div and that is why div has not taken any height. You do not need to add this style to make elements stick to the left. — Rohit416, Oct 04 '16 at 05:46

score 0 · Answer 1 · answered Oct 04 '16 at 04:33

You're markup is using the <p> tag not the <div> tag.

#box1 p {background-color: yellow; }
#box2 p {background-color: red; }
#box3 p {background-color: blue; clear:left;}
#box4 p {background-color: green; }

Also this belongs inside the <body>:

<h1>My Boxes</h1>

score 0 · Answer 2 · answered Oct 04 '16 at 04:40

Just You Put height:100vh; width:100%; in Div tag selector class in your css

div {
  height:100vh;
  width:100%;
  background: purple;
          
}


p { width: 50px;
    height: 50px;
    border: 2px solid black;
    margin-bottom: 10px;
    margin-right: 10px;
    float:left;
}
h1 {margin-bottom: 80px;
}

* {box-sizing: border-box;
margin: 0;
padding: 0;}

#box1   {background-color: yellow;




}
#box2   {background-color: red;


}
#box3   {background-color: blue;
    clear:left; 

}
#box4   {background-color: green;}

<body>
<div>

<p id="box1"> </p>
<p id="box2"> </p>
<p id="box3"> </p>
<p id="box4"> </p>  

</div>

score 0 · Accepted Answer · answered Oct 04 '16 at 15:13

You can just use overflow: auto to DIV as you have used float to the p should clear the float to recognized height of the parent.

div {
    background-color: purple;
    overflow:auto;

}


p { width: 50px;
    height: 50px;
    border: 2px solid black;
    margin-bottom: 10px;
    margin-right: 10px;
    float:left;
}
h1 {margin-bottom: 80px;
}

* {box-sizing: border-box;
margin: 0;
padding: 0;}

#box1   {background-color: yellow;




}
#box2   {background-color: red;


}
#box3   {background-color: blue;
    clear:left; 

}
#box4   {background-color: green;}

<div>

<p id="box1"> </p>
<p id="box2"> </p>
<p id="box3"> </p>
<p id="box4"> </p>  

</div>

HTML Background not showing

3 Answers3