∇ nabla – programování

Nové, čtěte prosím.

Úvod > Programování > Ukázky kódů – HTML/CSS > Dvousloupcový layout – pevná šířkou sloupců

Dvousloupcový layout – pevná šířkou sloupců

Výsledek v prohlížeči »

CSS

/* ---------------------------------------------------------------------------------------------
DVOUSLOUPCOVY LAYOUT – PEVNA SIRKA SLOUPCU
---------------------------------------------------------------------------------------------*/

.wrapper {
   width: 900px;
   margin: 50px auto 0 auto;
   padding: 0 15px;
   }

.content {
   text-align: left;
   border: 1px solid silver;
   }

.header {
   padding: 10px 18px;
   border-bottom: 1px solid silver;
   }

.column1 {
   float: right;
   width: 75%;
   }

.column2 {
   float: left;
   width: 24%;
   text-align: center;
   }

.column1-in, .column2-in {
   margin: 10px 18px;
   }

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

.footer {
   padding: 10px 18px;
   border-top: 1px solid silver;
   }

HTML

<div class="wrapper">

   <div class="content">

      <div class="header">

      </div>

      <div class="column1">
         <div class="column1-in">

         </div>
      </div> <!-- konec prvniho sloupce -->

      <div class="column2">
         <div class="column2-in">

         </div>
      </div> <!-- konec druheho sloupce -->

      <div class="cleaner">&nbsp;</div> <!-- cistic, ukonci plovani sloupcu -->

      <div class="footer">

      </div>

   </div> <!-- konec obsahu -->
</div> <!-- konec obalu -->
 
 
FB
Twitter
TOPlist