CSS: Dva sloupce v CSS

Definice: Mějme výchozí blok, který metodou půlení bloku rozdělíme na dva bloky (úseky kódu) A, B. Buď A v kódu stránky před B. Pak můžou nastat dvě situace při zobrazení bloků jako sloupců:

Blok A má být na stránce zobrazený před blokem B. 1

Oba sloupce dané šířky

(px, em, ex, pt, %, atd.)

1. A plovoucí v levém okraji B

   #A { width: 100px; float: left;
   #B { width: 300px; margin-left: 100px; } 

2. A i B plovoucí

   #A { width: 100px; float: left; }
   #B { width: 300px; float: [left|right]; }

3. B pozicované do pravhého okraje A

   #A { width: 100px; }
   #B { width: 300px; position: absolute; top: 0; left: 100px; }

4. A pozicované do levého okraje B

   #A { width: 100px; position: absolute; top: 0; left: 0; }
   #B { width: 300px; margin-left: 100px; }

5. A i B pozicované

   #A { width: 100px; position: absolute; top: 0; left: 0; }
   #B { width: 300px; position: absolute; top: 0; left: 100px; }

Levý sloupec (A) dané šířky

Pravý sloupec (B) nemá šířku určenou – má vyplnit zbylý prostor

1. A plovoucí v levém okraji B

   #A { width: 100px; float: left;
   #B { width: 300px; margin-left: 100px; }

2. A i B plovoucí

   NELZE, plovoucí prvek (B) musí mít určenou šířku!

3. B pozicované do pravhého okraje A

   NELZE, plovoucí prvek (B) bez určení šířky by přesáhl určený prostor!

4. A pozicované do levého okraje B 

   #A { width: 100px; position: absolute; top: 0; left: 0; }
   #B { width: 300px; margin-left: 100px; }

5. A i B pozicované

   NELZE, plovoucí prvek (B) bez určení šířky by přesáhl určený prostor!

Pravý sloupec (B) dané šířky

Levý sloupec (A) nemá šířku určenou – má vyplnit zbylý prostor

1. A plovoucí v levém okraji B

   NELZE, plovoucí prvek (B) musí mít určenou šířku!

2. A i B plovoucí

   NELZE, plovoucí prvek (B) musí mít určenou šířku!

3. B pozicované do pravhého okraje A

   #A { width: 100px; margin-right: 300px; }
   #B { width: 300px; position: absolute; top: 0; right: 0; } 

4. A pozicované do levého okraje B

   NELZE, plovoucí prvek (B) bez určení šířky by přesáhl určený prostor!

5. A i B pozicované

   NELZE, plovoucí prvek (B) bez určení šířky by přesáhl určený prostor!