<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body {
background-color: greenyellow;
}
#left-top, #right-top,#right-bottom,#left-bottom{
width: 50px;
height: 50px;
background-color: red;
border: solid;
border-width: 4px;
border-color: white;
}
#center {
float: left;
width: 146px;
height: 146px;
border: none;
background-color: dimgray;
}
#left-top {
float: left;
height: 200px;
}
#right-top {
float: left;
width: 200px;
border-left: none;
}
#right-bottom{
float: left;
height: 200px;
border-top: none;
}
#left-bottom{
margin-top: -58px;
float: left;
width: 200px;
}
#div1 {
width: 200px;
height: 58px;
}
#div2 {
float: left;
width: 200px;
height: 204px;
}
</style>
</head>
<body>
<div id="left-top"></div>
<div id="right-top"></div>
<div id="div1"></div>
<div id="center"></div>
<div id="right-bottom"></div>
<div id="div2"></div>
<div id="left-bottom"></div>
</body>
</html>