Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
    <head>
       <title>Испытание: строим сетку</title>
       <meta charset="utf-8">
    </head>
    <body>
        <div class="header">
            <div class="column-header positioner T">Header</div>
        </div>
        <div class="menu">
            <div class="column-menu positioner T">Menu</div>
        </div>
        <div class="promo T">
            <div class="positioner">
                <div class="column-promo T">Promo 1</div>
                <div class="column-promo T">Promo 2</div>
            </div>
        </div>
        <div class="columns">
            <div class="positioner">
                <div class="column Left T">Left</div>
                <div class="column Main T">Main</div>
                <div class="column Right T">Right</div>
            </div>
        </div>
         <div class="footer">
            <div class="column-footer positioner T">Footer</div>
        </div>
    </body>
</html>
 
html, body{
    margin:0;
    padding:0;
}
body{
    width:450px;
    height:335px;
    font-family:'Arial', sans-serif;
    font-size:10px;
    color:white;
}
/*
    Используемые цвета:
    #34495e - мокрый асфальт
    #c0392b - красный
    #3498DB - синий
*/
​
* {
    box-sizing: border-box;     /*решил не мучиться*/
}
​
.T {           /*задает нужный отступ везде где требуется для Tекста*/
    padding: 5px 5px;
}
​
.header {                       
    background-color: #34495e;   
    padding: 10px;
}
​
.column-header {
    background-color: #c0392b;
    min-height: 35px;
}
​
.menu {
    background-color: #3498DB;
}
​
.column-menu {
    min-height: 35px;
    
}
​
.promo {
    background-color: #34495e;   
    padding: 10px;
}
​
.column-promo {
    width: 170px;
    margin-right: 10px;
    float: left;
    background-color: #c0392b;
    min-height: 60px;
}
​
.column-promo:last-child {
    margin-right: 0px;
}
​
.column {
    background-color: #3498DB;
    margin: 10px 0;
    min-height: 110px;
}
​
.Left {
    width: 70px;
    margin-right: 10px;
    float: left;
}
​
.Main {
    width: 54.29%;
    float: left;
}
​
.Right {
    width: 70px;
    float: right;
    margin-left: 10px;
}
​
.footer {
    background-color: #34495e;   
}
​
.column-footer {
    min-height: 35px;
}
​
.positioner {
    width: 350px;   
    margin: 0 auto; /*центрование блока*/
    border: none; /*замените на "2px dotted green", чтобы*/                          /*понять как работает позиционер*/
}
​
.positioner:after {
    content:'';
    display: table;
    clear: both;
Output

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers