CSS позиционирование блоков

[klyne19]

Здраствуйте.

Имеется страница с div-ной вёрсткой, блок с контентом <div id="cont">контент</div>

Как на странице сделать врезку (обтекаемый текстом блок на странице) таким образом, чтобы html-код врезки был ниже кода контента?

Врезка должна располагаться в правом верхнем углу контента, и обтекаться соответственно текстом слева и снизу, а правым и верхним краями должна примыкать к краю страницы, т.е., как приведён пример, блока <div id="cont">.

Пример внешнего вида на википедии.

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

Возможно ли такое сделать?

[rus]

Ничего не понял. Приведите скрин того что надо и код того что хотите сделать и поясните.

[sigma77]

Попробую поработать экстрасенсом.

klyne19 хочет, чтобы визуально было вот так:

А код шел:

<div>
<p>Основной текст</p>
<img /> /* Обтекаемая картинка */
</div>

Edited April 26, 2010 by sigma77

[klyne19]

Попробую поработать экстрасенсом.

Угу, всё верно вы поняли, я думал после прочтения и просмотра примера в вики вопросов быть не должно

Только вместо обтекаемой картинки блок текста. Но это не принципиально, если картинку можно, то и div соответственно.

Есть какие идеи?

[psywalker]

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

[klyne19]

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

Обтекания ведь не будет.

Аналогичное Вашему решение - можно 2 дивами сделать, 1 float right другой left с фиксированной шириной блоков, это да.

Но критично обтекание.

Edited April 27, 2010 by klyne19

[SelenIT]

Разве что отогнать текст пустышкой подходящего (как минимум не меньшего, чем врезка) размера, а саму врезку отпозицинировать поверх пустышки абсолютно... Или яваскриптом, оставить в нужном месте пустой плавающий плейсхолдер, а после загрузки врезки сделать document.getElementById("id_плейсхолдера").appendChild(document.getElementById("id_врезки")) - правда, в момент срабатывания верстка дернется (как бывает при догрузке картинок с незаданными размерами) и при отключенных скриптах, увы, придется врезке побыть концевой сноской. Других вариантов (по крайней мере, до массовой поддержки template layout'ов и подобных радостей CSS3) не вижу...

[mini]

Здраствуйте.

Имеется страница с div-ной вёрсткой, блок с контентом <div id="cont">контент</div>

Как на странице сделать врезку (обтекаемый текстом блок на странице) таким образом, чтобы html-код врезки был ниже кода контента?

Врезка должна располагаться в правом верхнем углу контента, и обтекаться соответственно текстом слева и снизу, а правым и верхним краями должна примыкать к краю страницы, т.е., как приведён пример, блока <div id="cont">.

Пример внешнего вида на википедии.

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

Возможно ли такое сделать?

если я правильно понял то вот что тебе нужно...

HTML

 <div class="header">
		<div class="right_box">
			text text<br />
			text text<br />
			text text<br />
		</div>
		<p>center_text center_text center_text center_text center_text center_text center_text center_text center_text center_text center_text center_text center_text center_text center_text center_text center_text center_text center_text center_text center_text center_text center_text center_text center_text center_text center_text center_text center_text center_text center_text center_text center_text center_text center_text center_text center_text center_text center_text center_text center_text center_text center_text center_text center_text center_text center_text center_text center_text center_text </p>
	</div>

Css

 
.header {width:100%; overflow:hidden;}
.right_box {float:right; width:200px; background:red; margin:0 0 0 20px;}

то или нет?

[klyne19]

если я правильно понял то вот что тебе нужно...

...

то или нет?

Неа. Вот так надо, как написал пользователь sigma77 с моими последующими пояснениями.

<div class="header">
	<p>center_text center_text center_text center_text ... center_text </p>
	<div class="right_box">
		text text<br />
		text text<br />
		text text<br />
	</div>
</div>

Это и значит, что HTML-код обтекаемой врезки идёт _после_ кода обтекающего текста.

Ваш пример - там сначала врезка, потом текст.

===

SelenIT

Про пустышку я тоже думал. Ну там сначала картинку прозрачную поставить с нужной шириной, высотой и отпозиционировать абсолютно даже.

Только не угадаешь какая высота будет, вдруг текст разной высоты на разных страницах.

Про JS позиционирование - за такое по рукам поисковые системы могут забанить, имхо.

И как-то криво это всё, не изящно