Проблема

[Webkit]

Добрый вечер!

Как сделать чтобы элемент #after шел после содержимого #inner элемента #block с фиксированной высотой?

<style>
#block {
	background: #fcc;
	height: 10px;
}
#inner {
	background: #ccf;
	height: 30px;
	width: 10px;
}
#after {
	background: #cfc;
	height: 10px;
}
</style>
<div id="block">
	<div id="inner"></div>
</div>
<div id="after"></div>

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

Модель образная, высота #inner в 30px взята случайно поэтому просто использовать margin-bottom: 20px нельзя. Порядок элементов тоже нельзя изменить.

Edited March 28, 2012 by Webkit

[fr1run]

Вот, как вариант..

<style>
#block {
        background: #fcc;
        height: 10px;
        width:10px;
        float:left;
}
#inner {
        background: #ccf;
        height: 30px;
        width: 10px;
        float:left;

}
#after {
        background: #cfc;
        height: 10px;
}
</style>

<div id="inner"></div>
<div id="block"></div>
<div style="clear: left;">
<div id="after"></div>

Edited March 28, 2012 by fr1run

[Webkit]

Вот, как вариант..

<style>
#block {
        background: #fcc;
        height: 10px;
        width:10px;
        float:left;
}
#inner {
        background: #ccf;
        height: 30px;
        width: 10px;
        float:left;

}
#after {
        background: #cfc;
        height: 10px;
}
</style>

<div id="inner"></div>
<div id="block"></div>
<div style="clear: left;">
<div id="after"></div>

Порядок элементов тоже нельзя изменить.

Edited March 28, 2012 by Webkit

[NeoXidizer]

http://jsfiddle.net/5wrx2/

[Webkit]

<style>
#block {
	background: #fcc;
	height: 10px;
}
#inner {
	background: #ccf;
	height: 30px;
	width: 10px;
	float: left;
}
#after {
	background: #cfc;
	height: 10px;
	clear: both;
}
</style>
<div id="block">
        <div id="inner"></div>
</div>
<div id="after"></div>

То что надо! Спасибо.

Edited March 28, 2012 by Webkit