Уважаемые знатоки, Не могу расположить div блоки как на картинке: Пояснения: синий блок занимает весь экран, красный в этом блоке занимает самые левые 100 пикс и полностью растянут по высоте, а зеленый же блок занимает все оставшееся пространство синего. Может я какой-то туповатый, но у меня это осуществить не удалось. Это вообще возможно осуществить только средствами css или javascript придется подключать? Заранее спасибо, снизу голый код для удобства: Код (Text): <html><head><style> .main { position: fixed; display: block; border: 1px solid blue; height: 100%; width:100%; } .one { position: relative; display: block; border: 1px solid red; width:100px; } .two { position: relative; display: block; border: 1px solid green; } </style></head><body> <div class=main> <div class=one>Текст</div> <div class=two>Текст</div> </div> </body></html>
Необходимо добавить Код (Text): float: left к каждому внутреннему блоку. Но нужно учесть, что зеленый не займет автоматически всё оставшееся от красного места, а подстроится под размер контента.
Проще всего зелёному ширину прописать так Код (Text): width:calc(100% - 100px); Но смотри поддержку браузерами. CSS-макет становится умнее с calc() Жемчужина CSS3 — функция calc()
проблема гуглится по строке equal height columns. уже много копий сломано ))) решение "в лоб" — применить таблицу. иначе, разные трюки. очевидно блок-контейнер должен принимать высоту бо́льшей колонки, это используют для имитации равных колонок. сборник рецептов http://www.vanseodesign.com/css/equal-height-columns/