Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS] Divy obok siebie, jeden o stałej szerokości
Forum PHP.pl > Forum > Przedszkole
slawo123
21.12.2009, 00:03:12
Witam, nie potrafię znaleźć rozwiązania mojego problemu więc zwracam się do Was...

Otóż chciałbym uzyskać taki oto efekt:


Czyli szerokość lewego div'a ma być stała = 150px a szerokość prawego powinna być automatycznie regulowana w zależności od szerokości okna przeglądarki.
Szerokość procentowa lewej kolumny mnie raczej nie zadowala bo 150px jest ideałem.
Czy jest na to jakiś prosty sposób (bez kombinacji z blokowym wyświetlaniem prawego div'a i lewym marginesem 150px)?

Czyżby powrót do kochanych tabelek? smile.gif
Kshyhoo
21.12.2009, 08:39:46
Lewemu nadajesz:
[CSS] pobierz, plaintext 
  1. width: 150px;
  2. margin-right: auto;
  3. margin-left: auto;
  4. float: left;
[CSS] pobierz, plaintext

Prawemu:
[CSS] pobierz, plaintext 
  1. width: auto;
  2. margin-right: auto;
  3. margin-left: auto;
  4. float: right;
[CSS] pobierz, plaintext

I ładujesz oba do nadrzędnego DIVa, żeby nie pouciekały...
slawo123
21.12.2009, 21:48:36
Niestety nie działa sadsmiley02.gif Podaję moje źródełka:

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
  3. <head>
  4.   <meta http-equiv="Content-type" content="application/xhtml+xml; charset=utf-8" />
  5.   <title>Panel Administracyjny xxx.pl</title>
  6.   <link rel="stylesheet" href="style.css" type="text/css" />
  7. </head>
  8. <body>
  9.  
  10. <div id="main">
  11.     <div id="top"><div class="section"><d1>Panel Administracyjny xxx</d1></div></div>
  12.     <div id="navi"><div class="section">sdsd<br />sdsdsd<br />sdsadasdsd</div></div>
  13.     <div id="content"><div class="section">sdsd<br />sdsdsd<br />sdsadasdsd</div></div>
  14.     <div id="footer"><div class="section clear">powered by slawo</div></div>
  15. </div><!--end_#main-->
  16.  
  17. </body>
  18. </html>
[HTML] pobierz, plaintext 


[HTML] pobierz, plaintext 
  1. body {
  2.     padding:0;
  3.     margin:0;
  4.     background-color: #e8e8e8;
  5.     font-family: Verdana,Arial,Tahoma;
  6.     font-size: 12px;
  7.     color: #000;
  8. }
  9.  
  10. d1 {
  11.     font-size: 18px;
  12.     font-weight: bold;
  13.     padding: 4px 4px 4px 6px;
  14. }
  15. #main {
  16.     padding: 10px 80px 10px 80px;
  17. }
  18.  
  19. #navi {
  20.     width: 180px;
  21.     float: left;
  22.     margin-right: auto;
  23.     margin-left: auto;
  24. }
  25. #content {
  26.     margin-right: auto;
  27.     margin-left: auto;
  28.     float: right;
  29.     width: auto;
  30. }
  31.  
  32. .section {
  33.     border: 1px solid #e8e8e8;
  34.     background: #fbfaf4;
  35.     padding:3px;
  36.     margin: 2px;
  37. }
  38.  
  39. .clear {
  40.     clear:both;
  41. }
[HTML] pobierz, plaintext
Blame
22.12.2009, 06:39:54
Możesz dać dla div'a #main display:inline a dla #navi i #content display:inline-block.
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.