JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<html>
<head>
	<meta charset="utf-8" />
	<title>Зелёная среда</title>
	<meta name="keywords" content="зелёное" />
	<meta name="description" content="Сайт про всё что зелёное от природы" />
	<link rel="stylesheet" href="style.css" type="text/css"/>

    <!--[if lt IE 7]>
        <![if gte IE 5.5]>
        <script type="text/javascript" src="include/fixpng.js"></script>
        <style type="text/css"> 
        .iePNG { filter:expression(fixPNG(this)); } 
        .iePNG A { position: relative; }/* стиль для нормальной работы ссылок в элементах с PNG-фоном */
        </style>
        <![endif]>
        <![endif]-->

</head>

<body>

<div id="wrapper">

<div id="header">
	<div id="logo_wrapper">
		<div id="logo">
			<a href="/"><img src="img/logo.png" class="iePNG" alt="Зелёный сайт" width="248" height="235"/></a>
		</div>
		<div id="logo2">
			<img src="img/logo.png" class="iePNG" alt="Зелёный сайт" width="248" height="235"/>
		</div>
	</div>
	
	<div id="gor-menu">
		<ul>
			<li><a href="/">Главная</a></li>
			<li><a href="/">О нас</a></li>
			<li><a href="/">Контакты</a></li>
			<li><a href="/">Ссылки</a></li>
		</ul>
    </div><!--#gor-menu-->	
 </div><!--#header-->

<div id="middle">
	<div id="container">
		<div id="content">
			<p><strong>Content:</strong> Sed placerat accumsan ligula. Aliquam felis magna, congue quis, tempus eu, aliquam vitae, ante. Cras neque justo, ultrices at, rhoncus a, facilisis eget, nisl. Quisque vitae pede. Nam et augue. Sed a elit. Ut vel massa. Suspendisse nibh pede, ultrices vitae, ultrices nec, mollis non, nibh. In sit amet pede quis leo vulputate hendrerit. Cras laoreet leo et justo auctormentum. Integer id enim. Suspendisse egestas, dui ac egestas mollis, libero orci hendrerit lacus, et malesuada lorem neque ac libero. Morbi tempor pulvinar pede. Donec vel elit. </p>
		</div>
	</div><!-- #container-->
	<div class="sidebar" id="sideLeft">
		<strong>Left Sidebar:</strong> Integer velit. Vestibulum nisi nunc, accumsan...

CSS

* {
	margin: 0;
	padding: 0;
}
html {
	height: 100%;
}
body {
	font: 12px/18px Arial, Tahoma, Verdana, sans-serif;
	width: 100%;
	height: 100%;
	background-color:#285309;
}
a {
	color: blue;
	outline: none;
	text-decoration: underline;
}
a:hover {
	text-decoration: none;
}
p {
	margin: 0 0 18px
}
img {
	border: none;
}
input {
	vertical-align: middle;
}
#wrapper {
	width: 985px;
	margin: 0 auto;
	min-height: 100%;
	/*height: auto !important;
	height: 100%;*/
	background-color:#faf3b8;
}

/* Header
-----------------------------------------------------------------------------*/
#header {
	height: 296px;
	background-image:url(img/bgheader.jpg);
	background-repeat:no-repeat;
}

/* Middle
-----------------------------------------------------------------------------*/
#middle {
	width: 100%;
	padding: 0 0 87px;
	height: 1%;
	position: relative;
	background-color:#faf3b8;
}
#middle:after {
	content: '';
	clear: both;
	display: table;
}
#container {
	width: 100%;
	float: left;
	overflow: hidden;
}
#content {
	padding: 0 0 0 278px;
}

/* Sidebar Left
-----------------------------------------------------------------------------*/
#sideLeft {
	float: left;
	width: 258px;
	margin-left: -100%;
	position: relative;
	background: #B5E3FF;
}

/* Footer
-----------------------------------------------------------------------------*/
#footer {
	width: 985px;
	margin: -87px auto 0;
	height: 87px;
	background: #BFF08E;
	position: relative;
}
/* Footer
-----------------------------------------------------------------------------*/

#logo {
width:248px;
height:235px;
float:left;
}

#logo2 {
width:248px;
height:235px;
float:right;
}

#logo_wrapper{
	overflow:hidden;
}

#gor-menu {
width: 454px;
height: 93px;
background-image:url(img/bg-menu.jpg);
position:relative;
top:10px;
left:258px;
padding-top:18px;
}

#gor-menu a {
color:#000;
font-family:Verdana, Arial, Helvetica, sans-serif;
text-decoration:none;
}

#gor-menu li...