Верстка на DIV-ах

nehovaysyatopol, угу, может у него там какой-нить диагональный градиент
В общем "макет в студию"

Я вообще за то, чтобы использовать простые решения (JavaScript)
Но я против того, чтобы пользователям, заботящимся о безопасности (отключающим JS), показывать фигово сверстанный дизайн с разными блоками)))

Цитата ("nehovaysyatopol"):

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

Само собой разумется. Я просто показал, как можно манипулировать дивами, а не как заказ выполнить.

Цитата ("Anexroid"):

Но я против того, чтобы пользователям, заботящимся о безопасности (отключающим JS), показывать фигово сверстанный дизайн с разными блоками)))

интересно, сколько таких в процентном отношении....

Цитата ("superkoder"):

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

Да что Вы такое говорите?А про float, margin и clear Вы когда-нибудь слышали? С их помощью подобные колонки верстаются легко и просто.
Блочная верстка является более естественной с точки зрения браузера, а вот табличная как раз - редкостное извращение (исключая случаи как раз реальных таблиц, конечно).

Была такая же фигня. Мучился, мучился и в итоге создал 2 колонки через таблицы и туда уже запихнул дивы

Цитата ("raznomir"):

Цитата ("superkoder"):

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

Да что Вы такое говорите?А про float, margin и clear Вы когда-нибудь слышали? С их помощью подобные колонки верстаются легко и просто.
Блочная верстка является более естественной с точки зрения браузера, а вот табличная как раз - редкостное извращение (исключая случаи как раз реальных таблиц, конечно).

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

Никто и не спорит, что таблицы - для табличных данных...а вот сделать колонки одинаковой высоты в блочной вёрстке - задача хрестоматийная, непростая, и зависит от макета

Вы, видимо, не совсем поняли, в чем суть проблемы...

Цитата ("e-shpak"):

http://chikuyonok.ru/2009/06/float-columns/

опять же, под частный случай.....многие макеты таким способом не сделаешь...например, две колонки на неоднородном фоне, с закруглениями и бордером по краям......равновеликими в этом случае их можно сделать: а) с помощью скриптов; и б) переубедив заказчика, что если они будут разной высоты, то ничего страшного (делал неоднократно)

Цитата ("nehovaysyatopol"):

могу дать вам примерчики макетов

дайте один, эмейл в личке

Всем спасибо за ответы. (это не тормоз, просто сижу на даче без интернета)

2frags,
спасибо, идея понравилась (чего я сам до токого не догадался), но не очень универсальная. (в копилку идей)

franky,
> А что мешает залить весь body (или блок 1+2+3) фоном 1-го, а 2-му назначить float: right; ?
то, что я хочу получить, не получается так сделать
> Какой фреймворк, вы что?! Буквально "3 строчки кода": посилання
ссылка не открывается

sergey-best,
попробовал в ваш (ваш?) код вставить больше текста и тут же все поплыло

nehovaysyatopol,
> Хрестоматийная проблема при верстке блоками - проблема высоты...
оба-на, везет мне с косяками, оказывается это глобальная проблема обычно (да и не так часто и много это было) делал все таблицами, а тут решил учиться только блоками (все ж говорят, что блоки - это круто, а таблицы - позавчера) - и на тебе.

superkoder,
наверное да, не полностью отказываться от таблиц же. Как написал frig каждому решению свое место.

elosoft,
ага, а если синий блоок меньше?

Anexroid,
как раз хотел на ява скрипте сравнить высоты двух блоков и меньшему назначить высоту большего. Но то ли с синтаксисом что то напутал, то ли вообще так нельзя... В общем не получилось у меня. мучался-мучался, а потом плюнул.

Цитата (nehovaysyatopol):
Цитата:

Цитата (Anexroid):

Но я против того, чтобы пользователям, заботящимся о безопасности (отключающим JS), показывать фигово сверстанный дизайн с разными блоками)))

интересно, сколько таких в процентном отношении....

присоединяюсь к вопросу, интересно: неужели много пользователей с отключенным js?

Bob301,
пока так и сделал

e-shpak,
спасибо большое за ссылочку, думаю, что этот вариант мне в моем случае подойдет (по крайней мере, мне так кажеться; буду пробовать)

Цитата ("nehovaysyatopol"):

а вот сделать колонки одинаковой высоты в блочной вёрстке - задача хрестоматийная, непростая, и зависит от макета

а если еще "резиновые" блоки, то ууууу..... В общем в таких случаях предпочитаю традиционный секс с таблацами

Цитата ("swathtml"):

elosoft,
ага, а если синий блоок меньше?

Без разницы. При таких или подобных свойствах стилей родительский (зеленый) блок всегда будет по размеру бОльшего дочернего блока плюс размер своего собственного текста.

e-shpak, та госпаде, пажалста, зачем далеко ходить - giraffo.ru
вот есть колонка слева, и блок авторизации справа....сделайте, пожалста, чтобы они были одинаковой высоты.......ну то есть чтобы с двух сторон были симметричные одинаковые колонки


лень просто искать макет в своих рабочих файлах, но вот такая задача - две колонки по бокам одинаковой высоты - встречается в верстке очень часто.

Или даже если 1 колонка слева и контент - как сделать, чтобы они были одинаковой высоты?...а никак.....в этом конкретном случае

Нужно юзать гугль для решения таких вопросов

<!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>

		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

		<title>Two liquid columns example</title>

		<style type="text/css">

			.col-wrap1 {

				width:715px;

				background:url(bg1.png) #fabcbc bottom right no-repeat;

				border:10px solid #ee4d4d;

				position:relative;

			}


			.col-wrap2 {

				width:265px;

				position:relative;

				left: 715px;

				margin:-10px -200% -10px 50px;

				background:url(bg2.png) #d9edfc bottom left no-repeat;

				border:10px solid #53c4ff;

			}


			.col1 {

				float:left;

				width:715px;

				margin-right:-715px;

				position:relative;

				left:-715px;

				margin-left:-60px;

			}


			.col-wrap1, .col-wrap2 {

				-moz-border-radius:20px;

				-webkit-border-radius:20px;

			}


			.content {

				padding:20px;

			}


			p {

				margin-top:0;

			}


			.clear {

				clear:both;

				font-size:0;

				overflow:hidden;

			}

		</style>

	</head>

	<body>

		<div class="col-wrap1">


			<div class="col-wrap2">

				<div class="col1">

					<div class="content" id="c1">

						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris adipiscing nibh non purus suscipit venenatis. Maecenas egestas, neque a iaculis tristique, purus eros laoreet ligula, id venenatis erat purus vitae justo. Sed ac pellentesque magna. Cras faucibus metus vel velit gravida blandit. Etiam aliquet ligula non enim sagittis vehicula. Donec fringilla, erat et semper eleifend, justo quam sodales tellus, a vehicula ipsum libero eget mi. Integer condimentum, nibh aliquet adipiscing scelerisque, nisl magna accumsan arcu, nec vehicula magna mauris interdum elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat dapibus lorem.</p>

						<input type="button" value="Add text" onclick="addText('c1')" />

					</div>

				</div>

				<div class="col2">


					<div class="content" id="c2">

						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris adipiscing nibh non purus suscipit venenatis. Maecenas egestas, neque a iaculis tristique, purus eros laoreet ligula, id venenatis erat purus vitae justo. Sed ac pellentesque magna. Cras faucibus metus vel velit gravida blandit. Etiam aliquet ligula non enim sagittis vehicula. Donec fringilla, erat et semper eleifend, justo quam sodales tellus, a vehicula ipsum libero eget mi. Integer condimentum, nibh aliquet adipiscing scelerisque, nisl magna accumsan arcu, nec vehicula magna mauris interdum elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat dapibus lorem.</p>

						<input type="button" value="Add text" onclick="addText('c2')" />

					</div>

				</div>

				<div class="clear"></div>

			</div>

		</div>


		<script type="text/javascript">

			function addText(id) {

				var container = document.getElementById(id);

				var para = container.getElementsByTagName('p');

				container.insertBefore(para.cloneNode(true), container.firstChild);

			}

		</script>

	</body>

</html>

Цитата ("nehovaysyatopol"):

.а никак.....

еще как: двухколоночная разметка (правая и левая), 3 колонки, и в 6ие работает, и контент идет по коду выше колонок.
upd колонки растягивающиеся

veligursky, это код один в один из статьи по ссылке, что я приводила выше

Цитата ("e-shpak"):

veligursky, это код один в один из статьи по ссылке, что я приводила выше

этот код позаимствован у западных коллег (больше года назад и он не один в один хоть и похож), и у них же есть и под три и под 4 дива, жаль винду вирусы погрызли так бы выложил список закладок по верстке дивами почти под что угодно
одним словом учитесь пользоваться поисковиками

Цитата ("veligursky"):

он не один в один хоть и похож

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

Цитата ("veligursky"):

и у них же есть и под три и под 4 дива

да, данным способом можно сделать много колонок.