CSS

Делаем разбивку HTML\CSS

Пытаюсь сделать простую адаптивную разбивку HTML+CSS на 2 колонки основная колонка и сайдбар.

Вроде бы простая задача, однако примеров в сети найти так и не смог. Итак задача сделать 2 колонки основная content и sidebar. Content в html коде печатается первым, потом идет sidebar. Это сделано для того, чтобы при разрешении экрана меньше 768px sidber уходит вниз под контент, то есть дизайн складывался в одну колону для мобильных.

Это только заготовки далее оформляем по своему усмотрению. И даже в IE все нормально работает без костылей.

Из недостатков расстояние между блоками conent и sidbar будет равно 1% - оно будет немного меняться в зависимости от общей ширины. На глаз это почти не заметно. привожу примеры:


/*обнуляем все настройки по умолчанию - сброс*/
body, #wrap, #header, #main,  #content,  #sidebar,  #footer {

    margin:0;
    padding: 0;
}
/*внешний див обертка*/
#wrap{
    margin: 0 auto; /*автоцентрирования по центру*/
    padding: 0.5em;
    max-width: 1280px;   /*ширина не основы не более  */
}
/*шапка*/
#header{
    margin-bottom: 10px;
}
/*средний блок содержит content и sidebar */
#main {
    float: left;
    width: 100%;

}
/*основной контент*/
#content{
    float: left;
    width: 60%;
}
/*сайдбар - меню */
#sidebar {
   float: right;
   width: 39%;
}

#footer{
    margin-top: 10px;
}
                            /*   меньше чем 768px  складываем все блоки в одну колонку */
@media (max-width: 768px) {
    #content{
        float: none;
        width: auto;
        margin-bottom: 10px;
    }

    #sidebar {
        float: none;
        width: auto;
    }
}

/*цпециальный элемент для переноса на другую строку всех блоков после него */
.clear{
    clear: both;
    display: block;
}
                                /*          цвета          */
body{  /*цвет подложки */
    background-color: #F7F7F7;
}
#header, #content, #sidebar, #footer{
    border: solid 1px #808080;
    border-radius: 5px;
    background-color: #FFFFFF;
}

и HTML код:




Content text Content text Content text Content text Content text Content text Content text Content text Content text Content text Content text Content text Content text Content text Content text Content text