Два вопроса по div

Kverde · December 20, 2009

Здравствуйте. Помогите, пожалуйста, или отошлите к нужной ссылке

1. Есть шаблон с двумя колонками. Нужно чтобы эти колонки были одинаковые по высоте

<body><div id="container">

	<div id="rightcol">
		<h4>Меню</h4>
		<ul>
		  <li><a href="#">Главная</a></li>
		  <li><a href="#">Раздел 1</a></li>
		  <li><a href="#">Раздел 2</a></li>
		</ul>
	</div> <!-- rightcol -->

	<div id="content">
		<h1>Название страницы</h1>
		<p>Бла бла бла бла бла</p>
		<p>Бла бла бла бла бла бла бла бла бла бла бла бла бла бла бла бла бла бла бла бла бла бла бла бла бла бла бла бла бла  бла бла бла бла</p>
		<p>Бла бла бла бла бла бла бла бла блабла бла бла бла бла бла бла бла бла бла бла бла бла бла бла бла бла бла бла бла бла бла бла бла</p>
		<p>Бла бла бла бла бла</p>
	</div> <!-- content -->

</div></body>

#container {
	margin: 20px auto 20px;
	border: 5px solid red;
	text-align: left;
	width: 600px;
	}

#rightcol {
	float: right;
	width: 150px;
	border: 5px solid blue;
	}

#content {
	margin: 0 150px 0 0;
	padding: 10px;
	border: 5px solid green;
	}

2. Немного измененный первый пример. Как сделать чтобы коричневый блок был внизу?

Высота синего блока задана через height; Код не выкладываю потому что особо ничего не изменено, только два div'a новых.

Justnewone · December 20, 2009

"Блоки одинаковой высоты", а я бы сделал таблицей и не парился.

shvv · December 20, 2009

1. http://designformasters.info/posts/fauxcolumns/

2. Немного не понял задачу.

hf3 · December 20, 2009

сделай общий родительский диви присвой правому высоту 100 % ну и оверфлоу…

Searcher · December 21, 2009

сделай общий родительский диви присвой правому высоту 100 % ну и оверфлоу…

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

Если верстать таблицами, то тут будет проще с css, но больше мусора в коде html.

Int · December 21, 2009

Кто б этот код смотрел.

Обычно как проще, так и быстрее. А свободное время - это главное.

Kverde · December 21, 2009

Спасибо. Разбираюсь.

сделай общий родительский диви присвой правому высоту 100 % ну и оверфлоу…

В примере один общий род. див и два внутри. Если я задаю height: 100%, то ничего не меняется. overflow тоже пробовал. С этим не понятно.

Все методы по первому вопросу посмотрел. Понял как можно сделать.

А второй вопрос поясню: есть див. У него свойство height: 500px; Внутри него еще два дива. Как сделать чтобы один из них был сверху первого, другой снизу?

========= <-- общий div

=--2й div—--=

=————--=

=тут пусто__=

=————--=

=3й div——-=

==========

"Блоки одинаковой высоты", а я бы сделал таблицей и не парился.

Если верстать таблицами, то тут будет проще с css, но больше мусора в коде html.

Почему вы вообще упоминаете таблицы если их использование здесь неверно с точки зрения html? Или я не прав?

psywalker · December 21, 2009

Кто б этот код смотрел.
Обычно как проще, так и быстрее. А свободное время - это главное.

Да, но не забываем о будущей поддержке продукта.

shvv · December 21, 2009

А второй вопрос поясню: есть див. У него свойство height: 500px; Внутри него еще два дива. Как сделать чтобы один из них был сверху первого, другой снизу?

Родительскому диву задается position:relative, а дочерним - absolute. После этого можно позиционировать дочерние относительно родителя.

Sign In

Два вопроса по div

Question

Kverde

Link to comment

Share on other sites

8 answers to this question

Recommended Posts

Justnewone

Link to comment

Share on other sites

shvv

Link to comment

Share on other sites

hf3

Link to comment

Share on other sites

Searcher

Link to comment

Share on other sites

Int

Link to comment

Share on other sites

Kverde

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

shvv

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information