I am making a html page and have 3 sort of boxes, i have a 20% width(named single-box) and 40% width called double-box (both have hight 33%).
The other bbox is 100% height( named foto-box), 40% width.
Now i want to float next to eachother: double-box, singel-box, foto-box. Then i want all single boxes, but the single bbox is getting under the 100% of the foto-box. How can i
html, body{
height: 100%;
background-color: #c5c5c5;
}
.screen{
width: 98%;
height: 98%;
margin: 1% 1% 1% 1%;
}
.dubble-box{
width: 40%;
height: 33%;
background-color: aqua;
float: left;
}
.single-box{
height: 33%;
width: 20%;
background-color: black;
float: left;
}
.picture-box{
width:40%;
height: 100%;
background-color: bisque;
float: left;
}<!DOCTYPE html>
<html>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="reset.css"><!--resets css to default-->
<link rel="stylesheet" href="main.css"><!--gives css to page-->
<link rel="shortcut icon" href="lb.png" type="image/png">
<body>
<div class="screen">
<div class="dubble-box">
<p> levi</p>
</div>
<div class="single-box"></div>
<div class="picture-box"></div>
<div class="single-box"></div>
</div>
</body>
