Блочная верстка в 3 колонки с опциями.

[my-name-is-Max]

Приветствую всех.

Я только пару месяцев занимаюсь версткой (по специальности я программист), и перед мною встала проблема следующего формата.

Мне необходимо сверстать страничку в 3 колонки, верстка блочная (через div'ы), 33% - 34% - 33%. Вроде бы задача не сложная, в сети таких примеров ? до кучи. Однако, есть дополнительная опция ? средний div (назовем его "middle") и его контент должен распологаться по тексту первым, тот, что слева ("left") ? вторым, ну и последний, "right", соответственно, последним.

Т.е.:

  <div id="middle">
  </div>

  <div id="left">
  </div>

  <div id="right">
  </div>

Я пытался сделать двумя способами:

1. Абсолютное позиционирование:

  <div id="wrapper" style="position: relative">

	<div id="middle" style="position: absolute; width: 34%; height: 100%; left: 33%; top: 0px;">
	</div>

	<div id="left" style="position: absolute; width: 33%; left: 0px; top: 0px;">
	</div>

	<div id="right" style="position: absolute; width: 33%; right: 0px; top: 0px;">
	</div>

  </div>

2.

  <div id="middle" style="float: left; width: 100%;">

	...middle content middle content middle content middle content middle content...

	<div id="left" style="float: left; position: absolute; width: 33%;">
	</div>

	<div id="right" style="float: right; position: absolute; width: 33%;">
	<div>

  </div>

Используется докпайп

quot;-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

По поводу первого случая ? div'ы с абсолютной позицией не расягивают "wrapper", а выходят за его пределы (ну, это понятно). Второй ? контент распологается либо над div'ами "left" и "right", либо под ними, либо вообще как попало. Способа растянуть их по обеим сторонам на 100% я не нашел.

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

Заранее благодарен.

[Pavel_html]

Ну... я не уверен, но можно

body{
	   text-align:center;
}
#center{ 
			width:34%;
			display:block;
			float:center;
}
#right{
		 width:33%;
		 display:block;
		 float:right;
}
#left{
	   width:33%;
	   display:block;
	   float:left;	   
}

Или я не прав?

[my-name-is-Max]

"float: center;"

Что-то я такого не помню для XHTML 1.0

Там 4 варианта: "left", "right", "inherit" и "none".

[Pavel_html]

ну я ошибся...

margin:0 auto;

[my-name-is-Max]

По горизонтали они расположены как надо.

А "left" и "right" находятся ниже "center". Хотя это уже лучше, чем было. ;-)

[Pavel_html]

поиграй с margin

[my-name-is-Max]

Окай, спасибо за помощь ;-)

[Pavel_html]

У тебя ICQ есть? Дашь?

[my-name-is-Max]

470-207-799

[Vlad]

http://blog.html.it/layoutgala/LayoutGala02.html

Здесь что-то похожее, только последовательность загрузки колонок несколько иная: 2, 3, 1.

[Sotnikov]

не вижу проблемы...

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