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.)
- A plovoucí v levém okraji B
#A { width: 100px; float: left;
#B { width: 300px; margin-left: 100px; } - A i B plovoucí
#A { width: 100px; float: left; }
#B { width: 300px; float: [left|right]; } - B pozicované do pravhého okraje A
#A { width: 100px; }
#B { width: 300px; position: absolute; top: 0; left: 100px; } - A pozicované do levého okraje B
#A { width: 100px; position: absolute; top: 0; left: 0; }
#B { width: 300px; margin-left: 100px; } - A i B pozicované
#A { width: 100px; position: absolute; top: 0; left: 0; }
#B { width: 300px; position: absolute; top: 0; left: 100px; }
- A plovoucí v levém okraji B
Levý sloupec (A) dané šířky
- Pravý sloupec (B) nemá šířku určenou – má vyplnit zbylý prostor
- A plovoucí v levém okraji B
#A { width: 100px; float: left;
#B { width: 300px; margin-left: 100px; } - A i B plovoucí
NELZE, plovoucí prvek (B) musí mít určenou šířku!
- B pozicované do pravhého okraje A
NELZE, plovoucí prvek (B) bez určení šířky by přesáhl určený prostor!
- A pozicované do levého okraje B
#A { width: 100px; position: absolute; top: 0; left: 0; }
#B { width: 300px; margin-left: 100px; } - A i B pozicované
NELZE, plovoucí prvek (B) bez určení šířky by přesáhl určený prostor!
- A plovoucí v levém okraji B
Pravý sloupec (B) dané šířky
- Levý sloupec (A) nemá šířku určenou – má vyplnit zbylý prostor
- A plovoucí v levém okraji B
NELZE, plovoucí prvek (B) musí mít určenou šířku!
- A i B plovoucí
NELZE, plovoucí prvek (B) musí mít určenou šířku!
- B pozicované do pravhého okraje A
#A { width: 100px; margin-right: 300px; }
#B { width: 300px; position: absolute; top: 0; right: 0; } - A pozicované do levého okraje B
NELZE, plovoucí prvek (B) bez určení šířky by přesáhl určený prostor!
- A i B pozicované
NELZE, plovoucí prvek (B) bez určení šířky by přesáhl určený prostor!
- A plovoucí v levém okraji B
Blok B má být na stránce zobrazený před blokem A. 1
Oba sloupce dané šířky
- (px, em, ex, pt, %, atd.)
- A plovoucí v pravém okraji B
#A { width: 300px; float: right;
#B { width: 100px; margin-right: 300px; } - A i B plovoucí
#A { width: 300px; float: right; }
#B { width: 100px; float: [left|right]; } - B pozicované do levého okraje A
#A { width: 300px; margin-left: 100px; }
#B { width: 100px; position: absolute; top: 0; left: 0; } - A pozicované do pravého okraje B
#A { width: 300px; position: absolute; top: 0; left: 100px; }
#B { width: 100px; } - A i B pozicované
#A { width: 100px; position: absolute; top: 0; left: 300px; }
#B { width: 300px; position: absolute; top: 0; left: 0; }
- A plovoucí v pravém okraji B
Levý sloupec (B) dané šířky
- Pravý sloupec (A) nemá šířku určenou – má vyplnit zbylý prostor
- A plovoucí v pravém okraji B
NELZE, plovoucí prvek (A) musí mít určenou šířku!
- A i B plovoucí
NELZE, plovoucí prvek (A) musí mít určenou šířku!
- B pozicované do levého okraje A
#A { width: 300px; margin-left: 100px; }
#B { width: 100px; position: absolute; top: 0; left: 0; } - A pozicované do pravého okraje B
NELZE, plovoucí prvek (A) bez určení šířky by přesáhl určený prostor!
- A i B pozicované
NELZE, plovoucí prvek (A) bez určení šířky by přesáhl určený prostor!
- A plovoucí v pravém okraji B
Pravý sloupec (B) dané šířky
-
- A plovoucí v pravém okraji B
#A { width: 300px; float: right;
#B { width: 100px; margin-right: 300px; } - A i B plovoucí
NELZE, plovoucí prvek (A) musí mít určenou šířku!
- B pozicované do levého okraje A
#A { width: 300px; margin-left: 100px; }
#B { width: 100px; position: absolute; top: 0; left: 0; } - A pozicované do pravého okraje B
#A { width: 300px; position: absolute; top: 0; right: 0; }
#B { width: 100px; margin-right: 300px; } - A i B pozicované
NELZE, plovoucí prvek (A) bez určení šířky by přesáhl určený prostor!
- A plovoucí v pravém okraji B
Levý sloupec (A) nemá šířku určenou – má vyplnit zbylý prostor
