Jednoduchý layout

Manny · Napísal **Manny**: 31.05.2012 3:35

Zdravím vás,

na tomto obrázku je nakreslená situácia, ktorú teraz riešim a neviem si s ňou rady:

V skratke, snažím sa vytvoriť jednoduchý layout za pomoci CSS a HTML, ak bude ale treba využiť aj dačo iné, nebránim sa. Cieľom je teda vytvoriť dva DIVy, prvý bude zarovnaný vľavo, jeho výška bude 100%tná voči obsahovej časti stránky a šírka bude 300px. Druhý DIV bude umiestnený hneď vedľa neho po pravej strane, výška tiež 100% voči obsahovej časti stránky, ale šírka bude dynamicky prispôsobiteľná zvyšnému priestoru - proste ten priestor vyplní.

Zároveň by som chcel, aby medzi týmito DIVmi bol odsadený 6px okraj.

Vedel by mi niekto poradiť?

walther · Napísal **walther**: 31.05.2012 10:46

Čo si zatiaľ skúsil? Toto je vec, ktorá sa na google rieši na každom kroku a patrí medzi základ.

Manny · Napísal autor témy **Manny**: 31.05.2012 14:35

Zatiaľ som to skúšal cez:

Kód:

<table style="width: 100%; height: 100%; padding: 0; margin: 0;" cellspacing="6">
        <tr>
            <td valign="top" style="padding: 0; margin: 0; background: #eee; width: 300px;">
                <!-- lava 300px siroka fixna plocha -->               
              
            </td>
            <td valign="top" style="padding: 0; margin: 0; background: #ddd;">
                <!-- prava prisposobujuca sa plocha -->             
            </td>
        </tr>
    </table>

neviem ale či sa to nedá spraviť ešte jednoduchšie alebo kompatibilnejšie.

iNviNho · Napísal **iNviNho**: 17.09.2012 7:13

ok, urobis to takto:

Kód:

#1div {
float: left;
width: 300px;
height: 100%;
}

#medzeramedzidivmi {
float: left;
width: 30px;\\podla toho ake to chces mat siroke;
height: 100%;
background-color: white;
}

#3div {
float: right;
height: 100%;
}

malo by to pracovat, tie divy si pomenuj ako chces, ak by bol problem este ozvi sa

1daemon1 · Napísal **1daemon1**: 17.09.2012 8:55

Medzeru medzi divmi sprav cez margin pre prvy div radsej

iNviNho · Napísal **iNviNho**: 17.09.2012 9:32

samozrejme, alebo cez margin-right: xpx;

Jednoduchý layout

Podobné témy