Rozjezdzajace sie div'y Opcje

[koboos]

Witam.
Zrobilem taki układ div'ow:

Kod

<div id="box">
    <div id="box_top"></div>
    <div id="box_middle">
        <div id="box_right">
               <div id="box_center"></div>
        </div>
    </div>
    <div id="box_bottom"></div>
</div>

Kod css:

Kod

#box { width:439px;}
#box_top { height:12px; background: url(img/card_2_top.png);}
#box_middle { background:url(img/card_2_left.png) repeat-y;}
#box_bottom { height:18px; background: url(img/card_2_bottom.png);}
#box_right { width:100%; background: url(img/card_2_right.png) right repeat-y;}
#box_center { margin-left:7px; min-height:230px; width:422px; background:#76a901 url(img/card_2_bg.png) repeat-x;}

Tu jest jak to wyglada w praktyce:
html://kobusiewicz.pl/koboos/card.html

Problem polega na tym, ze gdy wpisze jakis tekst w "box_center", to wszystko mi sie rozjezdza w pionie. Nie mam bladego pojecia czym to moze byc spowodowane. Mam nadzieje ze ktos z Was mi pomoze.
Dodam, ze strasznie namordowalem sie z odpowiednim ustawieniem div'ow aby cienie i tla sie powielaly. Jesli uwazacie ze zrobione jest to nie za estetycznie, to podajcie moze jakies "lzejsze" rozwiazanie.

Pozdrawiam

[mortus]

div-om #box_top, #box_middle i #box_bottom nadaj jeszcze styl overflow: hidden;.

[krzysztof_kf]

div-om #box_top, #box_middle i #box_bottom nadaj jeszcze styl overflow: hidden;.

yyy ?

wystarczy dać jakiś wartość dla akapitu p dodaj kolego zawartość dla p dla css

Kod

p {
margin: 0;

Ten post edytował krzysztof_kf 30.03.2010, 22:42:55

[mortus]

div-om #box_top, #box_middle i #box_bottom nadaj jeszcze styl overflow: hidden;.

Fakt faktem pomyliłem się, bo źle przyjrzałem się zagnieżdżeniom. To div #box_center powinien mieć nadany styl overflow: hidden; i wtedy nie musimy się przejmować marginesami elementów wewnątrz.

@krzysztof_kf A jeśli zajdzie potrzeba umieszczenia akapitów w kolejnym div-ie i trzeba będzie tego div-a odsunąć od góry o np. 10px. To jak myślisz co się stanie?