JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="wrapper">
<header id="header">
<div>Заголовок</div>
<nav id="hor_menu">
Меню
</nav>
</header>
<section id="middle">
<div id="container">
<div id="content">
</div>
</div>
<aside id="sideLeft">
<nav id="ver_menu">
Меню
</nav>
</aside>
<aside id="sideRight">
</aside>
</section>
</div><!-- #wrapper -->
<footer id="footer">
Нижнее меню
</footer>
</body>
</html>
CSS
*{
margin:0;
padding:0;
}
html, body{
height:100%;
background:#fff;
}
header, nav, section, article, aside, footer {
display:block;
}
body{
font:16px/18px Arial, Tahoma, Verdana, sans-serif;
width:100%;
}
#wrapper{
width:1002px;
margin:0 auto;
height:100%;
}
/*Header*/
#header{
height:155px;
position:relative;
border:1px solid #b4b0b0;
border-bottom:none;
}
/*Middle*/
#middle{
min-height:100%;
background:url(http://savepic.net/2580459.jpg) repeat-y;
border-left:1px solid #b4b0b0;
border-right:1px solid #b4b0b0;
}
#middle:after{
content:'.';
display:block;
clear:both;
visibility:hidden;
height:0;
}
#container{
width:100%;
float:left;
margin-top:53px;
}
#content{
position:relative;
padding:0 270px 0 210px;
}
#sideLeft{
float:left;
width:199px;
margin-left:-100%;
position:relative;
margin-top:53px;
}
#sideRight{
float:left;
margin:0 -3px 0 -258px;
width:261px;
position:relative;
margin-top:53px;
}
/*Footer*/
#footer{
padding-top:15px;
width:1000px;
margin:-45px auto 0;
height:30px;
position:relative;
overflow:hidden;
background:#fff;
clear:both;
border:1px solid #b4b0b0;
border-bottom:none;
}