Dvousloupcový layout s pevnou šířkou sloupců

Nejprve se podíváme na výsledek v prohlížeči.

Jako pozadí použijeme obrázek, který je širší než vlastní layout. Barevně je rozdělen (modrá a bílá část) v poměru šířky sloupců (25 % : 75 %) a napozicován tak, aby i případné zvětšení (změnšení) šířky layoutu nevyžadovalo změnu obrázku. (Maximální šířka obrázku v tomto příkladu je 1400 px; výška 10 px.)

Obrázkem simulujeme pozadí sloupců. Kdybychom použili pouze vlastnost background-color, kratší sloupec by se neobarvil až dolů, jelikož pomocí CSS nelze zařídit, aby se kratší sloupec natáhl podle sloupce delšího.

Šířky sloupců jsou pak rozděleny v poměru 24 % : 75 % (jedno procento je rezerva, kdyby se některému prohlížeči zdálo, že je „to“ moc natěsno a layout nám rozhodil).

V layoutu používám hvězdičkový reset * {margin: 0; padding: 0;} k vynulování přednastavených okrajů v prohlížečích. Nejdená se však o nejšťastnější řešení. Problémy mohou nastat (mám pocit) třeba u formulářových prvků. Pokud si tedy hvězdičkovým resetem nejste příliš jisti, lepším řešením je využít jiný CSS reset.

CSS

/* ========== Obecne direktivy ========== */
* {margin: 0; padding: 0;}
html {height: 100%; font-size: 62.5%;}
body {height: 100%; font: 1.2em Verdana, Arial, Helvetica, sans-serif; text-align: center;
padding-bottom: 60px;}

/* ========== Layout ========== */
#obal {
   width: 770px;
   margin: 50px auto 0 auto;
   text-align: left;
   border: 1px solid green;
   background: url('pozadi.gif') repeat-y 25% 0;
   }

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

#sloupec1 {
   float: right;
   width: 75%;
   }

#sloupec2 {
   float: left;
   width: 24%;
   text-align: center;
   }

#sloupec1-in, #sloupec2-in {
   margin: 0.8em 1.2em;
   }

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

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

/* ========== Ostatni ========== */
h2, h3 {margin-bottom: 5px;}
p {line-height: 1.5; margin-bottom: 14px;}
ul li {margin-bottom: 3px;}
.noscreen {display: none;}

Sloupce lze v HTML kódu psát v libovolném pořadí (jelikož oba mají v CSS nastavenu vlastnost float). Z hlediska přístupnosti a SEO (Search Engine Optimization) je pak lepší psát menu až za vlastní obsah. Názvy identifikátorů sloupců je pak vhoné volit neutrální (ne třeba levý a pravý, jelikož snadno můžeme v CSS z levého sloupce udělat pravý a naopak). Kdybychom nepřepsali i názvy identifikátorů (což je zbytečně pracné) mátlo by nás to. Layout je navržen tak, abychom se v něm snadno zorientovali i s vypnutými styly.

XHTML

<div id="obal">

<div id="hlavicka">
   <h1>Nějaký text v hlavičce…</h1>
</div>
<hr class="noscreen" />

<div id="sloupec1">
<div id="sloupec1-in">
   <h2>Nadpis</h2>
      <p>Obsah…</p>

   <h2>Další nadpis</h2>
      <p>Obsah…</p>
</div>
</div>

<div id="sloupec2">
<div id="sloupec2-in">
   <h3>Menu</h3>
      <ul>
         <li><a href="#">Položka 1</a></li>
         <li><a href="#">Položka 2</a></li>
         <li><a href="#">Položka 3</a></li>
         <li><a href="#">Položka 4</a></li>
         <li><a href="#">Položka 5</a></li>
      </ul>
</div>
</div>
<div class="cleaner"> </div>
<hr class="noscreen" />

<div id="paticka">
   Nějaký text v patičce…
</div>

</div>

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

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