<html>
<head>
<meta charset="utf-8">
<title>display</title>
<link href="main.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="container">
<header>
<div class="pink first"> </div>
<div class="pink second"> </div>
</header>
<div class="main">
<div class="blue"> </div>
<div class="blue"> </div>
<div class="blue"> </div>
</div>
<footer>
<div class="pink first"> </div>
<div class="pink second"> </div>
</footer>
</div>
</body>
</html>
*{
margin: 0;
padding: 0;
}
.container{
display: table;
margin-left:auto;
margin-right:auto;
}
.header,.footer{
display: table;
background-color: rgb(45, 162, 191);
width: 640px;
height: 100px;
border: 1px double black;
}
.pink{
display: table-cell;
background-color: rgb(255, 200, 200);
width: 310px;
height: 80px;
border: 1px solid black;
}
.first{
margin-left: 5px;
}
.second{
margin-right: 5px;
}
.main{
display: table;
height: 210px;
width: 640px;
}
.blue{
display: table-cell;
background-color: rgb(203, 237, 250);
width: 200px;
height: 200px;
border: 1px solid black;
}
