LINUX.ORG.RU

[HTML и CSS] Вёрстка двумя колонками...


0

0

Помогите пожалуйста придумать вёрстку для конфигурации из двух вертикальных колонок. Предположительно через div'ы, но можно и смешанный вариант из таблицы и дивов. Что нужно:

1. Левая колонка (sidebar), ширина фиксированная, но определяется контентом и заранее не известна(т.е. нельзя задать её width).

2. Правая колонка (content), должна занимать всю оставшуюся ширину на странице.

3. Обе колонки должны иметь одинаковую высоту, заранее не известно какая из них будет бОльшей.

4. Колонки должны прилегать друг к другу без зазоров и наложений.

5. Желательная опция: вся конструкция должна занимать минимум всю страницу браузера по высоте.

Имею исходную болванку с двумя дивами:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html> 
<style>
body {  margin:0; padding:0; height:100%;}

#content { background:#f0f0f0; height:100%; width:100%;}

#sidebar { padding:0; margin:0; float:left; background: #808080; 		 height:100%;}

 </style>
 <body>
   <div id="sidebar"><p>H</p><p>Fe</p><p>G</p></div>
   <div id="content"> <p>Content</p> </div>
 </body>
</html>

Нагуглил уже много решений похожих проблем (например, тут), но везде размеры колонок заранее заданы в стилях (в процентах или в px/em). Но я не могу так делать и никакое из этих решений не получается проапгрейдить до нужных требований.

★★★★★

max-width посмотрите. и ещё эти два div'а можно засунуть в один и его настроить.

unikum ★★★★★ ()

> Левая колонка (sidebar), ширина фиксированная, но определяется контентом и заранее не известна

Плохая практика

tensai_cirno ★★★★★ ()
Ответ на: комментарий от tensai_cirno

В принципе плохая или фиксирование размера может помочь в решении задачи?

mashina ★★★★★ ()

>Обе колонки должны иметь одинаковую высоту, заранее не известно какая из них будет бОльшей

Заюзать изврат через третий div и отрицательные margin'ы.

...

Но лучше не страдать и сделать таблицей :)

KRoN73 ★★★★★ ()
Ответ на: комментарий от mashina

С фиксированным проблема вырождается. Либо если сама будет расширяться с динамическим контентов. Но сайдбарам лучше быть статичными. В плане размеров.

tensai_cirno ★★★★★ ()

зачем сайдбару быть по высоте равным контентной части?

trashymichael ★★★ ()
Ответ на: комментарий от trashymichael

зачем сайдбару быть по высоте равным контентной части?

Хочу сделать боковые закладки в конечном виде. Сайдбар должен быть не выше контентного дива и ещё нужно 'нарисовать' декорацию в виде правой рамки у сайдбара на всю длину контентного дива.

mashina ★★★★★ ()
Ответ на: комментарий от mashina

декорацию можно рисовать на контенте и двигать на сайдбар, про конечный вид ваще ниче не понял,если в сайдбаре будет больше контента чем в контенте что будет, оверфлов.хидден? странные желания, делай как можешь для начала чо.

trashymichael ★★★ ()
Ответ на: комментарий от trashymichael

Если картинка не поплывёт, примерно такое хочу сделать:

        .____________________________________________.
        |                                            |
  ______|                                            |
 |      |                                            |
 | A    |                                            |
 |______|                                            |
  ______|             Content div                    |
 |                                                   |
 | B                                                 |
 |______.                                            |
  ______|                                            |
 |      |                                            |
 | C    |                                            |
 |______|                                            |
        |                                            |
        |____________________________________________|

        \______________________ _____________________/
 \__ __/                       V
    V                     content div
    |
    `---> sidebar div
Разрывную границу со стороны контента, афаик, нарисовать не получится.

если в сайдбаре будет больше контента чем в контенте что будет, оверфлов.хидден?

Контентный див должен растянуться по вертикали на высоту сайдбарного дива: (общая высота сайдбара и контента) = max(высота сайдбара, высота контента)

mashina ★★★★★ ()
Ответ на: комментарий от mashina

Таблица, с шириной левой стороны 5%, с правой 95%. Левая сторона расширится при наличии контента сама.

no-dashi ★★★★★ ()

Точно не в Web-Dev вопрос?

Я бы использовал <table> и немно-ожко <script> (я всё же программист, а не верстальщик =), хотя чую верстальщики меня бы до-олго били обрезками труб за такое).

m4n71k0r ()
Ответ на: комментарий от m4n71k0r

Точно не в Web-Dev вопрос?

От блин, не знал что тут для этого отдельная ветка есть. Да, вопрос должен быть там.

Я бы использовал <table> и немно-ожко <script> (я всё же программист, а не верстальщик =), хотя чую верстальщики меня бы до-олго били обрезками труб за такое).

Я тоже не верстальщик, но идея использовать скрипт для такой задачи мне тоже не очень нравится. Ниже мне дали ссылку, я там нашёл такой вариант. Почти как мне нужно, только ширину сайдбара нужно задавать фиксированно. В крайнем случае упрощу свои хотелки или попробую сделать как там.

mashina ★★★★★ ()
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.