JSFiddle - React, Tailwind, and code Playground

by WHITEMAN23

HTML

<!DOCTYPE html>
 <head>
  <meta charset="utf-8" >
  <title>TeaM GreeD</title>
<!--[if IE]>
<link href="ie.css" rel="stylesheet" type="text/css">
<![endif]-->
 </head>
 <body>
     <div id="container"> <!--Регулирует размеры по ширине!-->
        <div id="header">     
        <div id="menu"> 
            <ul>
                <li><a href="#">Главная</a></li>
                <li><a href="#">О нас</a>
                    <ul>
                        <li><a href="#">Устав</a></li>
                        <li><a href="#">Состав клана</a></li>
                        <li><a href="#">Вступление в клан</a></li>
                    </ul>
                </li>
                <li><a href="#">Форум</a></li>    
        </ul>
     </div>
        </div>
            <div id="main">
                <div id="all">
                    <div id="out">
                        <div id="right"><iframe src="http://cache.www.gametracker.com/components/html0/?host=89.20.147.143:10140&bgColor=636467&fontColor=000000&titleBgColor=D7D7D7&titleColor=000000&borderColor=1F1F1F&linkColor=E3751E&borderLinkColor=119BCF&showMap=0&currentPlayersHeight=200&showCurrPlayers=1&showTopPlayers=0&showBlogs=0&width=240" frameborder="0" scrolling="no" width="240" height="388"></iframe></div>
                    </div>    
                    <div id="left">
                        <div id="news_container">
                        </div>
                        <div id="content"></div>
                    </div>
                </div>
            </div>    <!--Препятствует выпадению элементов и перпятствует заползанию контента за футер!-->
        <div id="footer"> <!--Футер!-->
        </div>

     </div>
 </body>
</html>

CSS

html, body{
        height:100%;
        margin:0; /*Для схемы с прижатым футером высота на всю область просмотра*/
}
html{
 background:#fff;
 color:#808080;
 font:10px verdana, geneva, sans-serif;
}
body{
        margin:0;       /*Убираем отступы*/
}
#container{
        height:100%;
        width:1200px;
        margin:auto;    /*Центрируем*/
}
#main{
        min-height:100%;
        margin:0 100px -30px;   /*Для футера*/
}
all{
        margin:39px 0 30px;
}
#out{
        float:right;
        width:100%;
        margin-left:-750px;
}
#right{
        margin-left:750px;
}
#left{
        float:left;
        width:750px;
}
#news_container{
        width:750px;
        height:300px;
        background:#fcf;
        margin:0 0 10px;
}
#Content{
        width:720px;
        background:#fcf;
}
#footer{
        overflow:hidden;
        position:relative;
        height:30px;
        background:#00afdd;
}
#header{
        left:0;
        top:0;
        width:100%;
        height:39px;
        background:#666;

}
#menu{
    width:100%;
    height:39px;
    margin:0 0 0 600px;
}
#menu ul{
    list-style:none;
    margin:0;
    padding:0;
}
#menu li {
    float:left;
    position:relative;
}
#menu li a{
    display:inline-block;
    height:39px;
    line-height:39px;
    padding:0 20px;
    color:#fff;
    text-transform:uppercase;
    text-decoration:none;
}
#menu li a:hover{
    background:#333;
}
#menu li ul{
    display:none;
    position:absolute;
    left:0;
}
#menu li:hover ul{
    display: block;
}
#menu li li{
    float:none;
}
#menu li li a{
    display:block;
    background:#666;
    white-space:nowrap;
}
#menu li li a:hover{
    background:#333;
}