[CSS][HTML] Problem z div'ami Opcje

[o2w5n778]

Witam!
Mam problem z div'ami a dokładnie ich wielkością. Mam trzy kolumny:

[HTML] pobierz, plaintext 
<div id="sr">
 
  <div id="left">
    left
  </div>
 
  <div id="show">
    srodek
  </div>
 
  <div id="right">
    right
  </div>
 
</div>
[HTML] pobierz, plaintext 

I one mają być koło siebie:

[HTML] pobierz, plaintext 
#sr{
  width: 900px;
}
 
#left{
  width: 180px;
  float: left;
}
 
#show{
  width: 100%;
  float: left;
}
 
#right{
  width: 180px;
  float: left;
}
[HTML] pobierz, plaintext 

Chciałem napisać to tak że w przypadku gdy div="left" lub div="right" jest pusty to div="show" ma się zwiększyć do jego miejsca. Aby tak się działo wartość width w div="show" musiałem dać 100% aby właśnie się tak powiększało. Niestety div="show" robi się na tyle szeroki że spycha div="right" pod siebie zamiast zostawić go obok. Jak temu zaradzić?
Z góry dziękuję za udzieloną pomoc!

[jg44]

Ale jeśli dla div left oraz right zapodałeś konkretną wartość szerokości (czyli 180px), to nawet jeśli one będą puste, to i tak będą zajmować te 180px szerokości. Powinieneś dać im wartość width: auto, i wtedy, jeśli będą puste, to nie będą zajmować przestrzeni, a dla diva show daj wartość: min-width: ???px, gdzie w miejsce ??? wpisz minimalną wartość szerokości tego kontenera. Jeśli left i right będą puste, to show powinien powiększyć Ci się i powinieneś uzyskać efekt.
PS. width: 100% zawsze spowoduje rozjechanie elementu na całą szerokość ekranu. :)

[o2w5n778]

Nie wiem czy dobrze kombinuje ale to nic nie dało:

[HTML] pobierz, plaintext 
#sr{
  width: 900px;
}
 
#left{
  width: auto;
  float: left;
}
 
#show{
  min-width: 540px;
  float: left;
}
 
#right{
  width: auto;
  float: left;
}
[HTML] pobierz, plaintext 

(IMG:style_emoticons/default/smile.gif)

[jg44]

Faktycznie, to nic nie da.
Efekt będzie tylko wtedy, jeśli tekst umieszczony w show będzie szerszy nic 540px - tylko wtedy ten div się rozszerzy. Jeśli tekstu będzie mniej, to niestety nie.
W takim razie nie pomogę, nie wiem, czy takie coś w ogóle da się zrobić w samym css (chociaż pewnie się da... (IMG:style_emoticons/default/wink.gif) )

Ten post edytował jg44 14.11.2011, 18:55:46

[o2w5n778]

No trudno, czekam na nowe pomysły (IMG:style_emoticons/default/smile.gif)

[Sebastian003]

A tak ?

[HTML] pobierz, plaintext 
body { margin: 0 auto;}
#sr{width: 900px;  margin: 0 auto;}
#left{ width: 180px;float: left;}
#show{width: 540px;float: left;}
#right{width: 180px;float: left;}
[HTML] pobierz, plaintext 

[HTML] pobierz, plaintext 
<div id="sr">
 
  <div id="left">
    left
  </div>
 
  <div id="show">
    srodek
  </div>
 
  <div id="right">
    right
  </div>
 
</div>
[HTML] pobierz, plaintext 

[o2w5n778]

@Sebastian003 chyba nie do końca zrozumiałeś (IMG:style_emoticons/default/smile.gif) W tym przykładzie co mi podałeś jeżeli div left lub right pozostanie pusty do div show nie powiększy się

[grzeee]

Z tego co wiem to nie da się na samych css zrobić 3 kolumn na float'ach tak aby same się dopasowały do szerokości w zależności od zawartości.
Wykorzystaj do tego js lub php