Trzy DIVy obok siebie

[nataniel]

Witam,

Chciałbym uzyskać taki efekt jak widac na tej stronie:
http://www.deviantart.com/
chodzi mi o te paski z zaokrąglonymi rogami.

Myślałem o umieszczeniu 3 divów obok siebie. Lewy oraz prawy div będą posiadały stałą szerokość, zawierały grafikę zaokrąglonych rogów oraz będą znajdowały się w pewnym małym odstępie od brzegów okna. Środkowy div wypełni całość, będzie zawierał treść a w momencie zmiany szerokości okna przegladarki zmieniał swoja szerokość tak aby 2 skrajne divy pozostawały na swoim miejscu i ze swoja ustalona szerokością.

Proszę o pomoc w postaci kodu css. Cos próbowałem już stworzyć ale nie działa to tak jak ma działać.

Jeśli miałby ktoś inna koncepcję rozwiązania tego problemu to chętnie

[slawko]

Może tak?

Kod: Zaznacz cały

<div id="left"></div>
<div id="center"></div>
<div id="right"></div>

style:

Kod: Zaznacz cały

#left{
float:left;
width:250px;//szerokość
height:500px;//wysokość
background-image: url(sciezkadopliku.jpg);
}
#center{
float:left;
width:auto;
height:auto;
}
#right{
float:right;
width:250px;
height:500px;//wysokość
background-image: url(sciezkadopliku.jpg);
}

Ja bym to robił w ten sposób
resztę sobie musisz sam doczytać.

[nataniel]

Slawko - taki sposób jaki Ty proponujesz już wcześniej próbowałem i divy są w jednej linii, lewy i prawy div mają ustalona szerokość i tło. Natomoast środkowy div posiada tło tylko pod umieszczona w nim treścią. Potrzebuje żeby tło tego diva rozciagało sie na całej przestrzeni między lewym a prawym divem.

Próbowałem też wyłączyć FLOAT:LEFT w środkowym divie co powoduje jego rozciagnięcie. Tylko wtedy prawy div przeskakuje do nastepnej lini.

[ooo_michal]

A zobacz co wyjdzie z tego:

Kod: Zaznacz cały

<div id="lewy"></div>
<div id="prawy"></div>
<div id="srodek"></div>

Kod: Zaznacz cały

#lewy {
float:left;
width:25px;
height:50px;
background-color: #ffff00;
}
#prawy {
float: right;
width:25px;
height:50px;
background-color: #80ff00;
}
#srodek {
height:50px;
background-color: #ff0000;
}

[slawko]

jeżeli tło masz z pliku graficznego użyj
background-repeat

a możesz pokazać swój kod html i css?

[nataniel]

Wypróbowałem drugi sposób, który zaproponowałeś:
Najpierw zadeklarować zewnętrzne divy a potem ten środkowy.

Teraz efekt jest taki jak oczekiwałem.
Dzięki wielkie Slawko za pomoc
Z tym CSS trzeba jednak kombinować.

Pozdrawiam