Problem to diagram divs favorite I need to pass as green and pink divs down the dark and light blue, leaving a larger div next to all but I do not know how to work this in CSS. Can anyone help me?
Below my html and css codes:
#forma{
width:960px;
height:930px;
background-color:#000;
margin:auto;
align:center;
}
#nav1{
width: 480px;
height: 30px;
background-color:#DFF034;
float: left;
}
#nav2{
width: 480px;
height: 30px;
background-color:#50E53F;
float: left;
}
#banner{
width: 960px;
height: 300px;
background-color: #3028E9;
}
#body1{
width: 320px;
height: 300px;
background-color: #2DD58A;
float: left;
}
#body2{
width: 320px;
height: 300px;
background-color: #020635;
float: left;
}
#body3{
width: 320px;
height: 300px;
background-color: #1A6AE5;
float: left;
}
#corner{
width: 320px;
height: 300px;
background-color: #000000;
float: left;
display: inline;
}
#incorner1{
width: 160px;
height: 150px;
background-color: #050421;
float: left;
}
#incorner2{
width: 160px;
height: 150px;
background-color:#B4C5CD;
float: left;
}
#incorner3{
width: 160px;
height: 150px;
background-color: #37CB44;
float: left;
}
#incorner4{
width: 160px;
height: 150px;
background-color: #DC8082;
float: left;
}
#bigcorner{
width: 640px;
height: 300px;
background-color: #AC8329;
float: right;
display: inline;
}
<html>
<head>
<meta charset="utf-8">
<title>layout2</title>
<link style="text/css" href="css/estilo2.css"
rel="stylesheet"/>
</head>
<body>
<div id="forma">
<div id="nav1"></div>
<div id="nav2"></div>
<div id="banner"></div>
<div id="body1"></div>
<div id="body2"></div>
<div id="body3"></div>
<div corner>
<div id="incorner1"></div>
<div id="incorner2"></div>
<div id="incorner3"></div>
<div id="incorner4"></div>
</div>
<div id="bigcorner"></div>
</div>
</body>
</html>