Адаптивный дизайн - колонки

Question

Адаптивный дизайн - колонки

Рейтинг: 2Ответов: 1Опубликовано: 16.03.2015

Здравствуйте.

Возникла такая проблема: на сайте есть две колонки. Одна - sitebar - фикс. размер (254px), а вторая - динамический размер (max-width: 1100px min-width: 668px). Помогите реализовать (в общем виде).

Что я сделал сам:

#sitebar {
position: relative;
width: 254px;
float: left;
}

#content-right-part {
float: right;
max-width: 1100px;
width: 100%;
min-width: 668px;
}

При таком раскладе правая колонка чуть-чуть уменьшается, а потом перескакивает на следующую строку. Попытавшись решить эту проблему, сделал так:

content {
    display: block;
    width: 1400px; /*max size*/
    white-space: nowrap;
}
content section {
    display: inline-block;
}

Однако проблема в том, что "пропала" адаптивность. То есть просто появляется скролл. Помогите, пожалуйста.

css html html5 css3 адаптивная-верстка

Источник: Stack Overflow на русском

Answer 1

▲ 2Принят

Не нужно задавать ширину основному контенту. Минимальную ширину можно задать врапперу на малых разрешениях. Лучше использовать class, а не id там, где это возможно.

<main>
    <h1>Responsive columns</h1>
    <section class="main_sidebar">
        Sidebar
    </section>
    <section class="main_content">
        Main content
    </section>
</main>

h1 {
    font-family:Arial, san-serif;
    font-size:24px;
    color:rgba(0,0,0,0.54);
    text-align:center;
}

main, .main_content, .main_sidebar   {
    position:relative;
    display:block;

}

main {
    width:100%;
    max-width:1024px;
    margin-top:50px;
    overflow:hidden;
}

.main_sidebar {
    float:left;
    width: 100px;
    height:auto;
    background:red;

}

.main_content {
background:green;
    margin-left:100px;
}

jsfiddle

Адаптивный дизайн - колонки

Ответы