Расположение div

[WWW.ZEOS.IN 1 161]

Вот такой код:

<div style="background-color: red;">

	<div style="background-color: green; float: left; width: 200px;">текст</div>

	<div style="background-color: blue; width: 200px;">текст</div>

</div>

Делает так:

Как сделать, чтобы синий блок тянулся вправо? Вот так:

P.S.

Таблицами могу сделать, а стилями не понимаю как сделать

[n0lik 75]

Самый простой сповоб

<div style="background-color: red;" align="right">

	<div style="background-color: green; float: left; width: 200px;">текст</div>

	<div style="background-color: blue; width: 200px;">текст</div>

</div>

Изменено 21 июля 2009 пользователем n0lik

[WWW.ZEOS.IN 1 161]

А какие еще способы бывают? Очень интересно все узнать

[n0lik 75]

А какие еще способы бывают? Очень интересно все узнать

Не знаю, может это поможет

[WWW.ZEOS.IN 1 161]

А как тогда сделать, чтобы в красном, основном блоке, синий и зелёный блок тянулись вправо?

Не понимаю, почему в этом коде:

<div style="background-color: red;" align="right">

	<div style="background-color: green; float: left; width: 200px;">текст</div>

	<div style="background-color: blue; width: 200px;">текст</div>

</div>

зелёный тянется влево, если основной блок (красный) указывает выравнивание вправо (align="right") Например, если сделать так таблицами:

<table style="background-color: red;" width="100%" cellpadding="0" cellspacing="0">

  <tr align="right">

	<td>

	  <table style="background-color: green; width: 200px;" align="left">

		<tr>

		  <td>

			текст

		  </td>

		</tr>

	  </table>

	  <table style="background-color: blue; width: 200px;">

		<tr>

		  <td>

			текст

		  </td>

		</tr>

	  </table>

	</td>

  </tr>

</table>

То получается точно так же:

P.S.

В зеленой таблице прописано: align="left" не для того, чтобы она тянулась влево, а именно для того, чтобы её обтекала синяя таблица, а не была под ней.

Не понимаю, почему так происходит? Ведь в основной таблице или DIV прописано выравнивание всего, что внутри них, в правую второну?!

Изменено 21 июля 2009 пользователем WWW.ZEOS.IN

[baxus 49]

Зеос Float смотри как работает.

Зелёному ты дал свойство float:left а этот параметр не только говорит типа всплывать на лево. Здесь ты сразу указываешь ему два свойства. "Всплывать на лево" - от чего то что шло до него, и одновременно "Обтекать слева" - тем что шло после него.

Тем самым если ты задаёшь зелёному float:left; он у тебя прижимается к левому краю а синий уже позиционируется в оставшемся пространстве влево или вправо.

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

И в дивах если я не ошибаюсь алигн не работает, иначе зачем бы люди мучались придумывали отступами центровать, есть text-align: но он только текст позиционирует.

Хотя херню сказад))) У тебя блоки поменяются местами... Делай на оба блока флоат райт

[WWW.ZEOS.IN 1 161]

<div align="right">

Странно, но align для div работает, хотя такого нет.

Не понятно почему сделали: vertical-align, а horizontal-align не сделали. Зато сделали text-align

P.S.

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

Изменено 21 июля 2009 пользователем WWW.ZEOS.IN

[baxus 49]

Наверное ошибочно срабатывает.. но я тоже понять не могу зачем делать css таким безграничным и делать такие ограничения нелепые. вместо этого алигн приходится прописывать два блока один в другом и позиционировать их относительно друг друга, а всё для того чтоб по центру встало.

[WWW.ZEOS.IN 1 161]

Фигня какая-то

Если прописать так:

<div style="background-color: red;">

	<div style="background-color: green; float: right; width: 200px;">текст</div>

	<div style="background-color: blue;   float: right; width: 200px;">текст</div>

</div>

то в принципе нормально, но пропадает красный основной блок! Спрашивается, почему?

Изменено 21 июля 2009 пользователем WWW.ZEOS.IN

[baxus 49]

Потому что блоки подтягиваются по оси Z к экрану монитора и фактически контейнер в котором они находятся остаётся без контента. А так как у него не заданы размеры он смыкается. Необходимо дать этому контейнеру также свойство float чтоб они все втроём встали на один слой. Тогда всё будет ок

Но опять же если нужно чтоб контейнер был заданного размера... то слева от него начнётся совершенно ненужное обтекание если указал float:left;

Нужно тогда ещё указать clear:left; - не обтекать слева но всплывать влево.

Или можно попробовать выставить float:both;

[WWW.ZEOS.IN 1 161]

[lifestar 18]

WWW.ZEOS.IN, так? http://mgudt.com/test/sample.html

[WWW.ZEOS.IN 1 161]

Спасибо! Сохраню себе, чтобы разбираться