Keilew

Horizontální čára jako praktický čistič

Pokud použijeme jako čistič plaváčků horizontální čáru, chceme tím dosáhnout dvou věcí najednou. Jednak aby to byl čistič:-) a dále aby tato čára nebyla vidět, avšak plnila svou funkci oddělovače v uživateském módu, tedy s vypnutými styly. Tedy jednoduché clear:both; height:0; visibility:hidden. Ale má to háček – použitím height:0 bohužel nedocílíme zmizení čáry se vším všudy, tedy konkrétně v Internet Exploreru. Internet Explorer si hodnoty pro tuto čáru bere přímo z jádra win32, a tak nám zde stůj co stůj zůstává okraj (1px na šířku čáry + 7px margin na každé straně).

Řešení je vlastně prosté. Jak vznikalo (alespoň toto, které znám, možná už to někdo vymyslel dávno předtím) se můžete podívat na diskusní fórum serveru jakpsatweb.cz.

Ručně přidejme čáře zmíněný okraj, který IE přidává automaticky (použil jsem padding-bottom), ať ho vidí a použijí i Firefox a Opera. Následně ho pomocí plaváčků, které touto čarou chceme clearovat, prostě ukradněme marginem záporným. Řešení bude vypadat následovně:

     div, p {
       margin: 0; padding: 0;
     } 
    
     #wrapper {
       width: 700px;
     }
    
     #plavacek, #plavacek2 { 
       float: left; 
       width: 50%; 
       margin-bottom: -15px; 
     } 
    
     .clear { 
       height: 0px; 
       padding-bottom: 13px; 
       clear: both; 
       visibility: hidden; 
     } 
  

Pro přehlednost html kód:

      <div id="wrapper">
        <div id="plavacek">
          <p>Lorem ipsum dolor sit amet...</p>
        </div>
        <div id="plavacek2">
          <p>Lorem ipsum dolor sit amet...</p>
        </div>
        <hr class="clear" />
      </div> 
  

Následující dvě, pro přehlednost obarvené, ukázky dokazují, že to funguje: ukázka 1, ukázka 2.

Všechny elementy <div> (oddíly, chcete-li), které hodláme takto clearovat, musí být plaváčky, jinak se vystavujeme nebezpečí zaúřadování „IE-brouka“ s názvem Guillotine.

Sepsáno: 18.6.2007

---