[CSS] Ułożenie elementów strony

[Louner]

Witam
Jest jakiś sposób, żeby ułożyć div'y w następujący sposób? (css) Nie interesują mnie tabele.

[michal1991]

Witam
Jest jakiś sposób, żeby ułożyć div'y w następujący sposób? (css) Nie interesują mnie tabele.

Oczywiści, że się da. Robisz tak:
1. Dodajesz w stylach DIV.main{}, do tego oczywiście width, height itp
2. Dodajesz w stylach DIV.top{}, do tego width: 100%, height np 100px,
3. Dodajesz w stylach DIV.lewa, ustalasz szerokośc i dajesz: float:left
4. Dodajesz w stylach DIV.prawa, ustalasz szerokośc i dajesz: float:right
5. W HTML:

<div class="main">
<div class="top">TOP</div>
<div class="lewa">lewa</div>
<div class="prawa">Prawa</div>
</div>

[Louner]

No... stosowałem takie rozwiązanie, ale nie działa tak jak powinno.
Screenshot:
http://img320.imageshack.us/img320/8706/rozbite0ae.jpg
Cały tekst powinien znajdować się na białym polu.

[michal1991]

To może pokaż ten twój kod to będzie łatwiej cokolwiek powiedzieć...

[Louner]

Strona:

Kod: Zaznacz cały

<div id="top">
        <div class="krance_tekst">
Lorem ipsum dolor sit amet consectetuer nec tortor mauris tellus laoreet. Laoreet Suspendisse ligula Vestibulum dictum Sed vel amet
        </div>
</div>
<div id="naglowek">
        <img src="./reklama.bmp" id="reklama" alt="reklama" />
</div>
<div id="body">
        <div id="tekst">

<div id="szczyt">
</div>
<div id="lewa_ramka">
</div>
<div id="prawa_ramka">
</div>

        </div>
</div>
<div id="stopka">
        <div class="krance_tekst">
Dragonrider - Fantastyka :: wszelkie prawa zastrzeżone :: webmaster: <a href="mailto:[email protected]">Louner</a>
        </div>
</div>

Arkusz:

Kod: Zaznacz cały

*
{
        font-size:10px;
        font-family:Verdana, Tahoma, Arial, Helvetica;
        text-align:justify;
        color:#4E4B42;
}
body
{
        padding:0px;
        margin:0px;
        background:url('./top.bmp') #DBD6C6 repeat-x fixed;
        text-align:center;
}
input
{
        background-color:#ffffff;
        border:1px solid #dfdabd;
}
form
{
        padding:0;
        margin:0;
}
A:link
{
        color:#4E4B42;
        font-family:Verdana, Tahoma, Arial, Helvetica;
        text-decoration:none;
}
A:active
{
        color:#4E4B42;
        font-family:Verdana, Tahoma, Arial, Helveticaa;
        text-decoration:none;
}
A:visited
{
        color:#4E4B42;
        font-family:Verdana, Tahoma, Arial, Helvetica;
        text-decoration:none;
}
A:hover
{
        color:#000000;
        font-family:Verdana, Tahoma, Arial, Helvetica;
        text-decoration:underline;
}
hr
{
        height:0;
        border:0 solid #aca899;
        border-top-width:1px;
        margin-top:0px;
}
#top
{
        width:760px;
        margin:auto;
        background:#EBE8DF;
        text-align:left;
        border:0 solid #aca899;
        border-left-width:1px;
        border-right-width:1px;
        height:15px;
        z-index:1;
}
#stopka
{
        width:760px;
        margin:auto;
        background:#EBE8DF;
        text-align:left;
        border:0 solid #aca899;
        border-left-width:1px;
        border-right-width:1px;
        height:15px;
        z-index:1;
}
.krance_tekst
{
        padding-top:0px;
        padding-left:3px;
        padding-right:3px;
        padding-bottom:3px;
        z-index:1;
}
#naglowek
{
        width:760px;
        background:url('./naglowek.bmp') repeat-x #FFFFFD;
        margin:auto;
        height:200px;
        text-align:left;
        border:0 solid #aca899;
        border-left-width:1px;
        border-right-width:1px;
        z-index:1;
}
#reklama
{
        position: relative;
        top:130px;
        left:16px;
        z-index:2;
}
#body
{
        width:760px;
        background:#FFFFFD;
        margin:auto;
        text-align:left;
        border:0 solid #aca899;
        border-left-width:1px;
        border-right-width:1px;
        z-index:1;
}
#tekst
{
        padding-top:3px;
        padding-left:3px;
        padding-right:3px;
        padding-bottom:3px;
        z-index:1;
}
#leweramki
{
        position:relative;
        left:0%;
        width:360px;
        background:#FFFFFD;
        border:1px solid #aca899;
        padding:3px;
        z-index:1;
        z-index:1;
}
#praweramki
{
        position:relative;
        left:50%;
        width:360px;
        background:#FFFFFD;
        border:1px solid #aca899;
        padding:3px;
        z-index:1;
        clear:left;
        z-index:1;
}
.naglowek
{
        font-size:16px;
        font-family:Garamond,Georgia,Verdana, Tahoma, Arial, Helvetica;
        text-align:justify;
        font-weight:bold;
        color:#4E4B42;
}
#szczyt
{
        width: 100%;
}
#lewa_ramka
{
        width:49%;
        float:left;
}
#prawa_ramka
{
        width:49%;
        float:right;
}

EDIT:
Już sobie poradziłem, przepraszam za kłopot. Wystarczyło przesunąć <div id="body"> w następujący sposób:

Kod: Zaznacz cały

<div id="body">
<div id="top">
        <div class="krance_tekst">
Lorem ipsum dolor sit amet consectetuer nec tortor mauris tellus laoreet. Laoreet Suspendisse ligula Vestibulum dictum Sed vel amet
        </div>
</div>
<div id="naglowek">
        <img src="./reklama.bmp" id="reklama" alt="reklama" />
</div>
        <div id="tekst">

<div id="szczyt">

</div>
<div id="lewa_ramka">
.
</div>
<div id="prawa_ramka">

</div>

        </div>
<div id="stopka">
        <div class="krance_tekst">
Dragonrider - Fantastyka :: wszelkie prawa zastrzeżone :: webmaster: <a href="mailto:[email protected]">Louner</a>
        </div>
</div>
</div>