Zaokrąglone rogi, dopasywanie wzdłuż i wszerz., 9 divów, środkowy rządzący kolegami Opcje

[Rewil]

Witam, mam zrobionego diva który chcę aby mógł się wzłuż i wszerz rozciągać.

http://koka.pctk.pl

Jak poinformować dwa pozostałe divy, żeby dorównały się od tego odchodzącego?

Przykładowo, jeśli nagłówek przesunie część kolumny. Dolne powinny overflowem, łapać szerokość do końca i ustawiać własną grafikę poszerzoną o repeat.
Chodzi mi głównie bardziej o logikę zbudowania czegoś takiego, ew. naprowadzenie.

[HTML] pobierz, plaintext 
<div class="dymek">
 
				<div class="dtresc">
					<div class="lgr"></div><div class="topg">Nagłówek</div>
					<div class="lr"></div><div class="trg">Jakiś tam tekst</div>
					<div class="ldr"></div><div class="btg"></div>
				</div>
 
				<div class="rogi">
					<div class="pgr"></div>
					<div class="pr"></div>
					<div class="pdr"></div>
				</div>
 
			</div>
[HTML] pobierz, plaintext 

[HTML] pobierz, plaintext 
body{
	background:url('../grafika/tlo.png') repeat-x;
	background-color: #ffc54f;
	font-family:Arial;
	font-size: 11px;
	color:#4e4e4e;
	padding:0;
	margin:0;
	/*overflow-y: scroll;*/
}
 
.dtresc{
	float:left;
}
 
.rogi{
	float:left;
}
 
/* gora */
 
.lgr{
	background:url('../grafika/dymki_01.png') no-repeat;
	width:52px;
	height:27px;
	float:left;
}
 
.topg{
	background:url('../grafika/dymki_02.png') repeat-x;
	min-width:236px;
	height:27px;
	float:left;
	color:#ff7800;
	line-height:40px;
	font-size:12px;
	font-weight:bold;
	overflow:hidden;
}
 
.pgr{
	background:url('../grafika/dymki_03.png') no-repeat;
	width:33px;
	height:27px;
}
 
/* srodek */
 
.lr{
	background:url('../grafika/dymki_04.png') no-repeat;
	width:22px;
	height:37px;
	float:left;
	clear:both;
}
 
.trg{
	background:url('../grafika/dymki_05.png') repeat-x #f2f2f2;
	min-width:266px;
	min-height:37px;
	float:left;
	overflow:hidden;
}
 
.pr{
	background:url('../grafika/dymki_06.png') no-repeat;
	width:33px;
	height:37px;
}
 
/* dol */
 
.ldr{
	background:url('../grafika/dymki_07.png') no-repeat;
	width:105px;
	height:47px;
	float:left;
	clear:both;
}
 
.btg{
	background:url('../grafika/dymki_08.png') no-repeat;
	min-width:183px;
	height:47px;
	float:left;
}
 
.pdr{
	background:url('../grafika/dymki_09.png') no-repeat;
	width:33px;
	height:47px;
}
[HTML] pobierz, plaintext 

[Kildyt]

@Crozin, o czym ty mówisz? Pseudo-elementy after i before (bo tak też można rozwiązać ten problem) jest dopiero wspierany w IE 9, który nie posiada jeszcze wersji stabilnej (tak samo z border-radius).

Ten post edytował Kildyt 22.12.2010, 20:11:46