Třísloupcový layout s pevnou šířkou sloupců

Podívejme se na výsledek v prohlížeči.

Uvedený třísloupcový layout jsou vlastně dva layouty dvousloupcové. Ačkoli 2 × 2 jsou sice 4, my dostaneme layout třísloupcový. Nejprve #obal rozdělíme na dva sloupce: #sloupec-levy a #sloupec-prostredni-pravy, který poté ještě rozdělíme na #sloupec-l a #sloupec-p.

Součet šířek dvojic sloupců je o 2 pixely nižší než šířka sloupce nadřazeného. Je to rezerva, aby se v některém prohlížeči layout náhodou nerozhodil. V moderních prohlížečích by však neměl s přesnou šířkou být problém.

CSS

html {height: 100%; font-size: 62.5%;}

body {
   height: 100%;
   text-align: center;
   font: 1.2em Verdana, Arial, Helvetica, sans-serif;
   min-width: 980px;
   margin: 0; padding: 0;
   }

.cleaner {
   clear: both;
   height: 0;
   font-size: 0;
   visibility: hidden;
   }


#hlavicka {
   padding: 10px;
   border-bottom: 1px solid green;
   background: #F0FBDF;
   }

h1 {margin: 0; padding: 0;}
p {line-height: 1.8; margin-bottom: 16px;}


/* =============== Trisloupcovy layout =============== */
#obal {
   width: 980px;
   margin: 50px auto 0 auto;
   text-align: left;
   border: 1px solid green;
   }

#sloupec-levy {
   float: left;
   width: 220px;
   }

#sloupec-prostredni-pravy {
   float: right;
   width: 758px;
   }

#sloupec-prostredni-pravy #sloupec-l {
   float: left;
   width: 536px;
   }

#sloupec-prostredni-pravy #sloupec-p {
   float: right;
   width: 220px;
   }

.obsah {margin: 1em;}
/* =============== Trisloupcovy layout konec =============== */


#paticka {
   padding: 10px;
   border-top: 1px solid green;
   background: #F0FBDF;
   }

V HTML kódu je pak #sloupec-levy na konci layoutu, jelikož se do něj je nejčastěji umístěno menu. Vlastní obsah stránek je tak umístěn v kódu dříve, což je dobré z hlediska SEO (Search Engine Optimization). Pokud byste chtěli jiné pořadí sloupců, stačí layout mírně upravit…

Přestože jsem u dvousloupcového layoutu psal, že názvy identifikátorů sloupců je vhodné volit neutrální, tak zde jsem uváděl názvy sloupců podle jejich umístění pro rychlejší zorientování se v layoutu.

XHTML

<div id="obal">

   <div id="hlavicka">
      <h1>Název webu</h1>
   </div>


   <div id="sloupec-prostredni-pravy">
      <div id="sloupec-l">
         <div class="obsah">
            <h2>Nadpis druhé úrovně</h2>
               <p></p>
               <p></p>
         </div>
      </div> <!-- Konec prostredniho sloupce -->

      <div id="sloupec-p">
         <div class="obsah">
            <h3>Nadpis třetí úrovně</h3>
               <p></p>
         </div>
      </div> <!-- Konec praveho sloupce -->
   <div class="cleaner">&nbsp;</div>
   </div> <!-- Konec sloupce obalujiciho prostredni a pravy sloupec -->

   <div id="sloupec-levy">
      <div class="obsah">
         <h3>Nadpis třetí úrovně</h3>
            <p></p>
      </div>
   </div> <!-- Konec leveho sloupce -->

   <div class="cleaner">&nbsp;</div>


   <div id="paticka">Text v patičce</div>
</div> <!-- Konec obaloveho divu -->

Testováno v prohlížečích IE 5.5+, Firefox, Opera, Safari, Google Chrome.


Stáhnout uvedené řešení ↓ (ZIP, staženo 5121×)

TOPlist
Další layouty