Верстка на div - выравнивание в две колонки

X-Ception · 16.09.2008, 15:25

Что-то давно не занимался версткой и застрял, как мне кажется, совсем не элементарных вещах

Имеется два слоя:

Код HTML:

<div class="left">... </div>
<div class="right">...</div>

Необходимо расположить их в две колонки: левая фиксированной ширины (200px), правая - на все оставшееся пространство.
Что необходимо прописать в css для этих слоев?

Оба слоя фикс. ширины, и оба в процентном соотношении - такие варианты сделал очень просто, а вот так как нужно что-то пока не получается...

Vladimir Kuts · 16.09.2008, 15:39

http://www.cssplay.co.uk/layouts/ — глянь там, есть пару примеров, может что-то подойдет

delaf · 16.09.2008, 16:37

http://htmlbook.ru поиск по слову "float right"

X-Ception · 16.09.2008, 17:36

Сообщение от Vladimir Kuts

http://www.cssplay.co.uk/layouts/ — глянь там, есть пару примеров, может что-то подойдет

спасибо, посмотрю, но вопрос пока остается открытым

http://htmlbook.ru поиск по слову "float right"

Знаю я и про float: left/right и про clear:both; и т.п. свойства из этой серии. Перепробовал уже все что можно, но нужного результата увы пока не вышло.

Получилось реализовать с помощью display:table и display:table-cell, но увы без кроссбраузерности, как следовало ожидать даже седьмой IE не знает о таких методах отображения.

anephew · 16.09.2008, 18:34

такссс ну а вот так:

Код:

<html>
<head>

<style type="text/css">

body { padding:0; margin:0;}

#left {
   float: left;
   width: 200px;
   background-color:#000000
}
#right {
   margin-left: 200px;
   width:100%;
   background-color:#999999
}

</style>

</head>
<body>

<div id="left">Текст левого блока</div>
<div id="right">Текст центрального блока</div>

</body>
</html>

но в в Internet Explorer есть проблема 3 пикселей

щас подумаем еще.

Шуранов · 16.09.2008, 18:34

Код:

<div style="width: 200px; border: 1px solid red; float: left;">Я первый див</div>
<div style="border: 1px solid green;">Я второй див</div>

Так?

3V · 16.09.2008, 20:03

Можно так: http://codeguru.ru/out/div-sample-0000.html

X-Ception · 16.09.2008, 23:04

Много интересных идей, но:

такссс ну а вот так:

Код HTML:

<html>
<head>

<style type="text/css">

body { padding:0; margin:0;}

#left {
   float: left;
   width: 200px;
   background-color:#000000
}
#right {
   margin-left: 200px;
   width:100%;
   background-color:#999999
}

</style>

</head>
<body>

<div id="left">Текст левого блока</div>
<div id="right">Текст центрального блока</div>

</body>
</html>

но в в Internet Explorer есть проблема 3 пикселей

щас подумаем еще.

не прошло - горизонтальный скрол вылез.

Код HTML:

<div style="width: 200px; border: 1px solid red; float: left;">Я первый див</div>
<div style="border: 1px solid green;">Я второй див</div>

Так?

Не так

Нет наличия двух колонок, если текста в правой части много, то он полностью обтекает левый блок.

Можно так: http://codeguru.ru/out/div-sample-0000.html

Вся проблема как раз в вытягивании правой части по ширине. Два фиксированных блока получить несложно.

Как и следовало ожидать, правильное решения оказалось очень простым и красивым:

Код HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style>
.left {
	float:left;
	width:200px;
}
.right {
	display:relative;
}
</style>
</head>
<body>

<div class="left" style="background-color:green">1111111111111</div>
<div class="right" style="background-color:red">22222222222222</div>

</body>
</html>

Вообщем проблема решена. Спасибо еще раз всем кто решил немного поработать головой

3V · 16.09.2008, 23:59

Сообщение от X-Ception

Вся проблема как раз в вытягивании правой части по ширине.

Зачем его вытягивать ?
Будет много текста - сам вытянется

Сообщение от X-Ception

Как и следовало ожидать, правильное решения оказалось очень простым и красивым:

Код HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style>
.left {
	float:left;
	width:200px;
}
.right {
	display:relative;
}
</style>
</head>
<body>

<div class="left" style="background-color:green">1111111111111</div>
<div class="right" style="background-color:red">22222222222222</div>

</body>
</html>

Вообщем проблема решена. Спасибо еще раз всем кто решил немного поработать головой

Делаем в правой части много текста, а в левой мало, и получаем эффект, аналогичный

Сообщение от X-Ception

Не так

Нет наличия двух колонок, если текста в правой части много, то он полностью обтекает левый блок.

З.Ы. изврат, но: http://codeguru.ru/out/div-sample-0001.html

X-Ception · 17.09.2008, 00:40

Сообщение от 3V

Делаем в правой части много текста, а в левой мало, и получаем эффект, аналогичный

Да уж, у других проверил, а у себя забыл

Да, такой вариант значит тоже отпадает.

З.Ы. изврат, но: http://codeguru.ru/out/div-sample-0001.html

Получается не два слоя "встык", а один поверх другого

Но тем не менее результат достигнут и все отображается так как задумывалось.

Разделы
Обсуждение доменных имён	Рыночные форумы	Дизайн и развитие проектов	Поисковая оптимизация	Отдыхаем
Обсуждение доменных имён и регистраторов	Подарю домен	Обсуждение веб-дизайна	Поисковые системы	Барахолка
⋅Аукционы	Продам домен - конкретная цена	Оценка дизайна, отзывы	⋅Yandex	Комната отдыха
⋅Обсуждение доменных имён и регистраторов IDN и РФ	⋅Домены в зоне .RU (Продам - конкретная цена)	Программирование	⋅Google	DomenForum - Замечания и предложения
⋅Обсуждение доменных имён и регистраторов newTLD	⋅Домены в зоне .РФ и IDN (Продам - конкретная цена)	Графический дизайн, Flash	Каталоги	Отзывы пользователей
Оценка доменных имён	Продам домен - Аукцион	Начинающему веб-мастеру	⋅Яндекс.Каталог
⋅Оценка IDN и РФ	⋅Домены в зоне .RU (Аукцион)		⋅DMOZ
⋅Оценка доменов в newTLD	⋅Домены в зоне .РФ и IDN (Аукцион)
Для новичков домен-индустрии	Продам домен - выслушаю предложения
Новости домен-индустрии	⋅Домены в зоне .RU (Выслушаю предложения)
⋅Другие полезные новости	⋅Домены в зоне .РФ и IDN (Выслушаю предложения)
Правовые вопросы	Куплю домен
Монетизация доменов	⋅Куплю домен за сумму до ~100$
	⋅Куплю .РФ или IDN домен
	Продам/Kуплю готовый сайт
	⋅Сателлиты и варез
	⋅Сайты на бесплатном хостинге
	⋅Покупка/Продажа контента
	Хостинг Предложения/Спрос
	Купля, продажа, обмен ссылками
	⋅Покупка
	⋅Продажа
	⋅Обмен
	⋅Размещение статей
	Финансы, кредиты, обмен валют, инвестиции
	Реклама
	⋅Вакансии
	⋅Каталоги
	⋅Регистрация в каталогах

Здесь присутствуют: 1 (пользователей: 0 , гостей: 1)