[CSS][HTML]Ułożenie div'ow inline i block'owo, nie mogę ustawić szerokości divów względem zawartości Opcje

[pablo_83]

witam, mam problem, z którym walczę już jakiś czas.
mianowicie mam widok, który zwraca mi pola formularza wraz z ich opisem (docelowo będą jeszcze dwa linki edycja i kasuj).

struktura divów jaką nadałem wygląda tak:

[HTML] pobierz, plaintext 
<div class="pola_formularza">
<div class="lewa_strona">1</div><div class="prawa_strona"><input type="text" readonly="readonly"/></div>
</div>
<div class="pola_formularza">
<div class="lewa_strona">2</div><div class="prawa_strona"><textarea readonly="readonly"></textarea></div>
</div>
<div class="pola_formularza">
<div class="lewa_strona">3</div><div class="prawa_strona"><input type="text" readonly="readonly"/></div>
</div>
<div class="pola_formularza">
<div class="lewa_strona">4</div><div class="prawa_strona"><select><option></option></select></div>
</div>
[HTML] pobierz, plaintext 

czyli mamy cztery wiersze (pola_formularza), które dzielą się na dwie kolumny (lewa i prawa).
oto css:

[HTML] pobierz, plaintext 
.pola_formularza{
    display: block;
    min-height: 30px;
    border: 1px solid #0066cc;
    width: 500px;
}
 
.lewa_strona{
   display: inline;
    width: 200px;
    border: 1px solid #F00;
    margin: 5px;
}
.prawa_strona{
    display: inline;
    width: 200px;
    border: 1px solid #E2c934;
    margin: 5px;
}
.pola_formularza .prawa_strona input{
    width: 200px;
}
.pola_formularza .prawa_strona textarea{
    width: 200px;
}
.pola_formularza .prawa_strona select{
   width: 200px;
}
[HTML] pobierz, plaintext 

w tym momencie divy lewa i prawa nie reagują w ogóle na zmiany szerokości (mają tylko szerokość taką jak wprowadzona treść), tak samo nie reagują na zmiany w wysokości.
Proszę o pomoc w jaki sposób mogę ładnie rozłożyć te divy po lewej i prawej stronie.

linki, które docelowo się pojawią będą w tej samej lini co divy lewa i prawa, dokładnie po prawej stronie prawego diva, w odp proszę o uwzględnienie tego elementu.

[ShadowD]

Grrr, a dlaczego nie dasz gdzieś tego na serwerze?

[gargamel]

Dla elementów będących inline nie można ustawiać szerokości. Zadziała to tylko w niektórych przeglądarkach.

Edit:

Co do rozmieszczania divów to : display:block; a do tego float: na przykład left. Wtedy możesz dowolnie manipulować szerokością i wysokością.

Ten post edytował gargamel 10.06.2011, 20:36:26

[pablo_83]

jak dam float to lewa i prawa w stosunku do siebie są ok, jednak "uciekają" z pola_formularza.
pola_formularza zostają stałe np. przy textarea wysokość jego nie dostosowuje się do zawartości.

Jakieś pomysły jak to w inny sposób ładnie ułożyc?

[gargamel]

Mała podpowiedź

[HTML] pobierz, plaintext 
  <style type="text/css">
   .container { width:700px; height:500px; border:1px solid black; }
   .internal  { width:340px; height:75px; border:1px solid black; float:left; }
   .clearer   { clear:both; }
  </style>
 
  <div class="container">
 
    <div class="internal"> 1 </div>   <div class="internal"> 2 </div>
    <div class="internal"> 3 </div>   <div class="internal"> 4 </div>
    <div class="internal"> 5 </div>   <div class="internal"> 6 </div>
    <div class="internal"> 7 </div>   <div class="internal"> 8 </div>
 
    <div class="clearer"></div>
 
  </div>
[HTML] pobierz, plaintext 

Ten post edytował gargamel 10.06.2011, 20:58:01

[drPayton]

Mały hint: jeśli elementy blokowe mają być obok siebie, display:inline-block. Działa we wszystkich istotnych przeglądarkach, a IE6 nie bierze sie juz pod uwagę.
Z taką właściwością, rozmieszczane są w jednej linii jak elementy "inline" jednocześnie zachowując możliwość nadawania rozmiarów i inne właściwości elementów blokowych.