JSFiddle - React, Tailwind, and code Playground

by Евгений

HTML

<div id="container">
    <div id="key_words">
        <div id="key_words_text">
      текст, который должен быть внизу<br>текст, который должен быть внизу<br>текст, который должен быть внизу<br>текст, который должен быть внизу
          </div>
	</div>
    <div id="main">
        <div id="all">
            
            <div id="sidebar">sidebar</div>
            <div id="content">
content<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>end
            </div>
        </div><!--end all-->
    </div><!--end main-->	
    <div id="footer">footer</div>
</div><!--end container-->

CSS

html,body{
	background:#fff;
	height:100%;
	color:#000;
	margin:0;
	padding:0;
}
#container{
	width:1200px;
	background:url(bg_sidebar.png) repeat-y;
	margin:0 auto;
}	
#key_words{
	color:red;
    display: table-footer-group;
}
#key_words_text {
    margin-left:250px;
}
#all{
	width:100%;
	overflow:hidden;
	background:url(bg_sidebar.png) repeat-y;
}
#main{
	background:url(bg_content.png) repeat-y 100% 0;
    display: table-row-group;
}	
#sidebar{
	float:left;
	width:250px;
}
#content{
	float:left;
	width:950px;
}
#footer{
	float:left;
	width:100%;
	height:150px;
	background:#388b3d;
}