[HTML][CSS] Problem z zakodowaniem forum

[Mylek]

Witam.
Mam mały problem z zakodowaniem odpowiedzi na forum.
Chce aby pole z treścią i z opisem autora automatycznie się rozrzedzały do tych samych rozmiarów.
Gdy ustawie na sztywno wysokość na np 300px to się ładnie roszczenia,lecz gdy ustawie np 100% to już jest coś takiego:

A kod wygląda tak:
HTML

Kod PHP:

<div class="zawartosc">
            <div id="pokaz_temat">
                <h2>Temat:Przykladowy temat</h2>
                <ul>
                    <li>
                        <div class="kwadrat1">
                            <div class="zawartosc1">
                                <p class="nazwa">Mylek</p>
                                <img src="images\avatar\33.jpg" />
                                <p class="postow">Postów: 755</p>
                                <p class="pomogl">Pomógł: 32</p>
                                <a href="#" class="pomogl_button"></a>
                            </div>
                        </div>
                        <div class="kwadrat2">
                            <div class="data">
                                <span></span><p>Data dodania: 2010-09-22 17:52:38</p>
                            </div>
                            <p class="tresc">
                            Witam, 

Panowie, a więc postanowiłem wymienić przednie klocki hamulcowe, lewe przednie koło super poszło szybko i łatwo tłok się wcisnął wszystko poczyściłem ogólnie super. Gorzej z prawym przednim otóż gdy wyjąłem klocki z zacisku okazało się, że mam porwaną gumową osłonkę tłoczka i widocznie nawpadało tam syfu i teraz nie mogę wcisnąć tłoczka, aby założyć nowe grubsze klocki. Prawdopodobnie czeka mnie wymiana zacisku, ale boję się, że nie poradzę sobie z tym, bo chyba będzie trzeba odpowietrzać później układ hamulcowy i ktoś mi mówił, że we wszystkich 4 kołach,
                            </p>
                        </div>
                    </li>
                </ul>
            </div>
          </div> 


css

Kod PHP:

/* Pokaz temat */
#cialo .srodek .zawartosc #pokaz_temat { margin: 0 auto; width:840px;border: 1px solid #dedcdc; background: #fff}
#cialo .srodek .zawartosc #pokaz_temat h2 {  display:block; height:26px; width:818px; padding: 4px 10px; background: url(../images/ikona_folder.jpg) repeat-x; position:relative; left:1px; top:1px; font-size:15px; color:#777676; font-family:Arial, Helvetica, sans-serif; font-weight:bold;}
#cialo .srodek .zawartosc #pokaz_temat ul li .kwadrat1 { float:left; height:100%; display:block;background: #d3d3d3; position:relative; border-right: 1px solid #fff;border-bottom: 1px solid #fff; border-left: 1px solid white; }
#cialo .srodek .zawartosc #pokaz_temat ul li .kwadrat1 .zawartosc1 {display: block; width: 200px; min-height: 220px;}
#cialo .srodek .zawartosc #pokaz_temat ul li .kwadrat1 .zawartosc1 .nazwa {text-align: center ; font-size: 15px; font-weight: bold;}
#cialo .srodek .zawartosc #pokaz_temat ul li .kwadrat1 .zawartosc1 img { margin: 5px auto; border: 1px solid black;}
#cialo .srodek .zawartosc #pokaz_temat ul li .kwadrat1 .zawartosc1 .postow {margin-left: 60px; margin-top: 5px; font-size: 14px;}
#cialo .srodek .zawartosc #pokaz_temat ul li .kwadrat1 .zawartosc1 .pomogl { margin-left: 60px;margin-top: 5px; font-size: 14px;}
#cialo .srodek .zawartosc #pokaz_temat ul li .kwadrat1 .zawartosc1 .pomogl_button { display: block; height: 18px; width: 86px; margin-left: 60px;margin-top: 5px; background: url(../images/pomogl.png) no-repeat;}
#cialo .srodek .zawartosc #pokaz_temat ul li .kwadrat2 {float:left; display:block; width: 637px; height: inherit; background: #dedcdc; border-bottom: 1px solid #fff;}
#cialo .srodek .zawartosc #pokaz_temat ul li .kwadrat2 .data p {  color: #545454; font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif; }
#cialo .srodek .zawartosc #pokaz_temat ul li .kwadrat2 .data span { margin-right: 5px;float: left; display: block; width: 9px; height: 10px; background: url(../images/data.png) no-repeat ; margin-top: 2px; margin-left: 2px;}
#cialo .srodek .zawartosc #pokaz_temat ul li .kwadrat2 .tresc { margin: 30px 10px; font-size: 12px; font-family: Verdana, Arial, Helvetica, sans-serif;}
#cialo .srodek .zawartosc #pokaz_temat ul li {margin-top: -6px; height: 100%; overflow: hidden;} 


Ma ktoś pomysł jak to zrobić zęby działało?

[ixtab]

Zrób sobie SS, wytnij z niego linie o wysokości 1px i wstaw jako tło dla UL. Bordery i inne bajerki będziesz miał w grafice, odejdzie sporo kodu w css. To najprostsze rozwiązanie jakie przychodzi mi na myśl w tej chwili.

[Mylek]

ixtab dzięki za odpowiedz.
Ale nie za bardzo wiem co to znaczy SS.
I takie pytanie mam czy:
W jakim stopniu ilość kodu CSS wpływa na prędkość działania strony?:]

[ixtab]

Konkretnie na prędkość jej wczytywania. Im cięższy plik, tym dłużej się pobiera - normalne.
Pisząc "SS" miałem na myśli ScreenShot, przepraszam że tak zakodowałem, pisałem przed wyjściem, więc "kompresowałem" tekst, hehe.
Jeśli wytniesz ze zrzutu paseczek o wysokości 1px i szerokości całego contentu, wstawisz go jako tło dla <ul> to lewy i prawy blok będą tej samej wysokości. Tak naprawdę już są, tylko nie mają tła...