Problem sa ugnjezdenim divom

[ asmiki @ 29.01.2005. 15:32 ] @

Imam problem sa nested divom i css-om. Radi se o tome da ne znam kolika ce mi duzina teksta biti ni u glavnom ni u nested divu...pa kad je tekst u glavnom divu dovoljno dugacak taj tekst prosiruje div korektno...medjutim kad je taj tekst kratak ovaj ugnjezdeni div mi prelazi preko glavnog diva.

...kako to resiti kroz css?

evo primer koda:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html><head><title></title>

<style type="text/css">
    body {
        background-color:#ccc;
        margin:20px 20px 0px 20px;
        }

    .main {
        border:1px solid #000;
        background:#fff;
        }

    .main .menu {
        border-left:1px solid #000;
        border-bottom:1px solid #000;
        float:right;
        height:auto;
        width:230px;
        height:230px;
        background:#eee;
        margin:0px 0px 10px 10px;
        }
</style>
</head><body>

<div class="main">
    <div class="menu"></div>
    <P>Donec semper eros aliquet ligula. In non leo. Pellentesque ac dui. Aliquam
        eget leo. Donec dapibus augue id nibh. Aenean eget eros. Duis sem. Suspendisse
        ut risus id urna egestas pharetra. Suspendisse massa. Ut mollis mi ac sem.
        Aliquam imperdiet imperdiet odio. Quisque quis nunc. Fusce eu mauris ac lectus
        eleifend convallis. Curabitur volutpat augue in arcu. </P>
        <P>Nulla eget tellus. Aliquam erat volutpat. Praesent dolor augue, tempus sit
        amet, dictum non, convallis sagittis, diam. Aenean leo sem, varius in,
        condimentum sit amet, lobortis eu, nisl. Praesent interdum ornare odio. Donec
        lorem orci, dapibus eu, tincidunt a, pretium id, metus. Aliquam vehicula
        tristique metus. Phasellus dapibus. Sed laoreet pellentesque nisl. Nulla lorem
        ipsum, laoreet eu, dictum id, pretium in, neque. Morbi venenatis. Ut mauris.
        Nulla nec libero. Nam consequat augue quis ipsum. Proin ac lacus. Morbi
        vehicula. Suspendisse molestie elementum nibh. Aliquam erat volutpat. Duis
        ligula. Nunc nonummy mauris et wisi. </P>
        <P>Mauris semper ligula vitae urna. Sed varius, massa eu viverra auctor, eros
        erat pretium urna, ac tempus diam est et arcu. Integer sed enim in est
        adipiscing iaculis. Vivamus vitae arcu sit amet velit condimentum convallis.
        Praesent posuere sapien vitae eros. Nullam ac sem. Maecenas posuere massa
        euismod turpis. Vestibulum egestas dolor at orci. Aliquam erat volutpat. Cras
        velit. </P>
</div>
<br />
<br />
<div class="main">
    <div class="menu"></div>
    <P>Donec semper eros aliquet ligula. In non leo. Pellentesque ac dui. Aliquam
        eget leo. Donec dapibus augue id nibh. Aenean eget eros. Duis sem. Suspendisse
        ut risus id urna egestas pharetra.</P>
</div>

</body>
</html>

[ noviKorisnik @ 29.01.2005. 20:26 ] @

Uključen ti je float: right.

Code:
<!DOCTYPE ...

<style ...
        .cboth {clear: both;}
</style>...
<div class="main">
    <div class="menu"></div>
    <P>Donec semper eros aliquet ligula.</P>
<br class="cboth" />
</div>

</body>
</html>

[ asmiki @ 29.01.2005. 20:52 ] @

Citat:

noviKorisnik: Uključen ti je float: right.

mislim da me nisi razumeo...meni je i cilj da on bude float:right u odnosu na main div, medjutim meni taj nested div prelazi okvire main diva...sto ja ne zelim nego ako je on vece visine od glavnog da i glavni bude te visine...mislim da kad se proba onaj kod odozgo da se vidi problematika

...ne znam sta dobijam sa clear:both

[ noviKorisnik @ 30.01.2005. 01:21 ] @

Možeš da dodaš min-height: 230px; u .main

(btw - ovo ne radi u IE)

[ Br@nkoR @ 31.01.2005. 09:57 ] @

@novikorisnik je odgovorio na tvoj problem rešenje je da na kraj lajera main dodaš jedan element koji će imati osobinu clear: both, ovim elementom dobijaš(preuzeto iz CSS specifikacije):

Citat:

This property indicates which sides of an element’s box(es) may not be adjacent to an earlier floating box. The ’clear’ property does not consider floats inside the element itself or in other block formatting contexts.

Znači na kraj lajera main dodaj još jedan lajer:

Code:
<div style="clear: both;"></div>

[ Br@nkoR @ 31.01.2005. 10:07 ] @

Citat:

noviKorisnik: Možeš da dodaš min-height: 230px; u .main

(btw - ovo ne radi u IE)

ma ima da radi:

Code:
height: expression(this.scrollHeight < 230? "230px" : "auto" );

[ noviKorisnik @ 31.01.2005. 10:27 ] @

Da li su te skripting fore specijalnost za IE ili to gutaju i drugi?

[ asmiki @ 31.01.2005. 10:28 ] @

Citat:

Br@nkoR: @novikorisnik je odgovorio na tvoj problem rešenje je da na kraj lajera main dodaš jedan element koji će imati osobinu clear: both, ovim elementom dobijaš(preuzeto iz CSS specifikacije):

Znači na kraj lajera main dodaj još jedan lajer:

Code:
<div style="clear: both;"></div>

...izvinjavam se, jeste ovo odgovor sto je noviKorisnik napisao, ne znam sta sam uradio prosli put pa mi to nije funkcionisalo, hvala obojici, resen mi je zestok problem

[ Br@nkoR @ 31.01.2005. 10:49 ] @

Citat:

noviKorisnik: Da li su te skripting fore specijalnost za IE ili to gutaju i drugi?

To je specijalnost samo za IE.
Više o tome na:
http://msdn.microsoft.com/libr...thor/dhtml/overview/recalc.asp

Mada se ovo sa min-height u IE može jednostavnije da se reši upotrebom npr:

Code:
_height: 230px;

Jer jer je dobro poznato da kada ima više sadržaja ne dolazi do prelivanja sadržaja već IE proširuje taj elemenat.

Pozdrav.