Два элемента и содержимое.

[Webkit]

Добрый день!

Есть элемент #a с фиксированным размером и следующий за ним элемент #b.

Код:

<style>
div {
	height: 10px;
	width: 10px;
}
#a {
	background: #fcc;
}
#b {
	background: #ccf;
}
</style>
<div id="a">1<br/>2</div>
<div id="b"></div>

Как при помощи css сделать так, чтобы второй элемент #b шел после содержимого первого элемента #a, выходящего за его границы?

Как есть и как должно быть:

Порядок элементов менять нельзя, создавать другие элементы тоже. Размеры содержимого элемента #a произвольны (неизвестны), поэтому просто задать margin для элементов нельзя.

Edited March 30, 2012 by Webkit

[Switch74]

добавь для #a или #b соответствующий margin

а вообще советую переверстать, не очень правильно сделано

[Webkit]

добавь для #a или #b соответствующий margin

а вообще советую переверстать, не очень правильно сделано

margin не подходит т.к:

Размеры содержимого элемента #a произвольны (неизвестны)

Переверстывать тут нечего, всего 2 элемента.

Именно для этого примера нужно обойтись только добавлением css свойств к элементу #a или #b, еще надо учесть выше написанное.

Edited March 30, 2012 by Webkit

[NeoXidizer]

откуда вы берете эти задачки с двумя дивами, уже который день

http://jsfiddle.net/ekKXv/

[Webkit]

откуда вы берете эти задачки с двумя дивами, уже который день

http://jsfiddle.net/ekKXv/

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

Кстати, таже задача (проблема) что и прошлый раз, но теперь без дополнительно вложенного элемента div. =)

В вашем примере получилось не то что на картинке.

Если не найдется решения буду использовать ваш прошлый способ.

Edited March 30, 2012 by Webkit

[NeoXidizer]

мне кажется, "как на картинке" будет являться имитацией ошибки, так как такое поведение - верное

и в соседней теме вы писали, что background - лишь для показа, как себя ведет объект, а важен лишь результат

http://jsfiddle.net/ekKXv/ более точно, но не работает в IE6-IE7

хотя может есть и другой способ

хотя вот решение для IE6-IE7 http://tanalin.com/projects/display-table-htc/

[Webkit]

мне кажется, "как на картинке" будет являться имитацией ошибки, так как такое поведение - верное

и в соседней теме вы писали, что background - лишь для показа, как себя ведет объект, а важен лишь результат

http://jsfiddle.net/ekKXv/ более точно, но не работает в IE6-IE7

хотя может есть и другой способ

хотя вот решение для IE6-IE7 http://tanalin.com/projects/display-table-htc/

Фон нужен был для обозначения внутренних границ элемента. То есть, в данном примере, высота блока должна остаться 10 px.

Такого же результата можно добиться удалив свойство height у элемента #a (пример), так что это не то.

Edited March 30, 2012 by Webkit

[Switch74]

у тебя сейчас поведение совершенно логичное

если нужна реализация только css:

убирай у #a высоту и ставь ему фоном картинку

проще переделывать верстку

чтобы получилось то, что тебе нужно

<div id="a">1<br/>2<div id="b"></div></div>