Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS][HTML] Problem z div'ami
Forum PHP.pl > Forum > Przedszkole
o2w5n778
Witam!
Mam problem z div'ami a dokładnie ich wielkością. Mam trzy kolumny:
  1. <div id="sr">
  2.  
  3. <div id="left">
  4. left
  5. </div>
  6.  
  7. <div id="show">
  8. srodek
  9. </div>
  10.  
  11. <div id="right">
  12. right
  13. </div>
  14.  
  15. </div>

I one mają być koło siebie:
  1. #sr{
  2. width: 900px;
  3. }
  4.  
  5. #left{
  6. width: 180px;
  7. float: left;
  8. }
  9.  
  10. #show{
  11. width: 100%;
  12. float: left;
  13. }
  14.  
  15. #right{
  16. width: 180px;
  17. float: left;
  18. }


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:
  1. #sr{
  2. width: 900px;
  3. }
  4.  
  5. #left{
  6. width: auto;
  7. float: left;
  8. }
  9.  
  10. #show{
  11. min-width: 540px;
  12. float: left;
  13. }
  14.  
  15. #right{
  16. width: auto;
  17. float: left;
  18. }

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... wink.gif )
o2w5n778
No trudno, czekam na nowe pomysły smile.gif
Sebastian003
A tak ?

  1. body { margin: 0 auto;}
  2. #sr{width: 900px; margin: 0 auto;}
  3. #left{ width: 180px;float: left;}
  4. #show{width: 540px;float: left;}
  5. #right{width: 180px;float: left;}



  1. <div id="sr">
  2.  
  3. <div id="left">
  4. left
  5. </div>
  6.  
  7. <div id="show">
  8. srodek
  9. </div>
  10.  
  11. <div id="right">
  12. right
  13. </div>
  14.  
  15. </div>
o2w5n778
@Sebastian003 chyba nie do końca zrozumiałeś 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
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.