Bruno 50 Bruno 50 - 2 months ago 6
HTML Question

HTML Background not showing

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>

Answer

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>