zevilz

Разобрался. Добавил всем элементам box-sizing: border-box - http://jsfiddle.net/88bh68v3/8/ Я как раз его на своих сайтах использую.

Появилась еще одна проблема. Если контента мало, то блок контента сужается и смещается вправо - http://jsfiddle.net/88bh68v3/7/. Если сделать ширину контента 100%, то блок контента залезает на сайдбар, а при float: left меняется с сайдбаром местами.

Тоже работает Только для сайдбара нужно установить white-space: normal, т. к. nowrap будет работать и для содержимого сайдбара - http://jsfiddle.net/88bh68v3/6/

та же проблема - http://jsfiddle.net/88bh68v3/3/ А так работает - http://jsfiddle.net/88bh68v3/4/То, что нужно. Спасибо. А как насчет кроссбраузерности и валидности минусового марджина в 100%?

Про @media я и сам знаю, у меня проблема с позиционированием садбара слева от контента, если сайдбар в коде расположен ниже контента. На мобильниках контент и так будет без марджина, а под ним сайдбар без float.

контент сайдбар когда нужно используете float и margin Я ж написал, в первом сообщении, в чем проблема, если сайдбар сделать ниже контента. Контент статичный с марджином слева, сайдбар плавающий слева. В этом случае сайдбар будет слева, но под контентом, т.е. слева от контента будет пусто. Поэтому и делаю сайдбару абсолютное позиционирование.

Я так и собираюсь сделать, но если отключить float и margin с предыдущей версткой, то сайдбар будет выше контента, а мне нужно наоборот.

Сначала был примерно вот такой код: <div class="content"> <div class="content_div"></div> <div class="sidebar"> <p></p> <p></p> </div></div>с таким css: .content_div { margin-left: 220px;}.sidebar { float: left; width: 200px;}Все отображается нормально. Но тут для адаптивности шаблона под мобильники (на мобильниках планируется вывод сайдбара под контентом) потребовалось поменять местами content_div и sidebar. При этом sidebar съехал вниз под content_div. Поместил контент сайдбара в дополнительный блок и установил position: absolute: <div class="content"> <div class="sidebar"> <div class="sidebar_wrap"> <p></p> <p></p> </div> </div> <div class="content_div"></div></div>.content {position: relative;}.content_div { margin-left: 220px;}.sidebar { float: left; width: 200px; position: absolute; top: 0; left: 0;}Опять все в норме, за исключением того, что сайдбар может уйти за пределы экрана при маленькой высоте контента, т.к. position: absolute. Можно добавить min-height к контенту со значением больше максимальной высоты сайдбара, но контент сайдбара динамический и часто изменяется. Могут появиться лишние пустые пространства, а если добавить много контента, то придется снова править css, чтобы сайдбар не уехал за пределы экрана. Как можно решить эту проблему без использования js, чисто через css? Или может есть какие другие способы разместить сайдбар под контентом так, чтобы осталась предыдущая верстка? Заранее спасибо за ответы.