Jeden sloupec fixní, druhý proměnlivý

I v případě responsivního webu s gumovým procentuálním layoutem, který se přizpůsobuje dostupné velikosti okna, je možné sem tam použít sloupec s fixní šířkou.

Jeden fixní a druhý proměnlivý sloupec

Jak na to?

Záporný margin

První možnost je nejprve vytvořit dva obtékané sloupce (float):

  • pravy s pružnou 100% šířkou
  • levy s fixní šířkou 100 pixelů
Pravý pružný sloupec
Levý fixní sloupec

Nyní se sloupci s pružnou 100% šířkou nastaví záporný krajní margin o fixní šířce druhého sloupce, čímž se dostanou vedle (přes) sebe:

Pravý pružný sloupec
Levý fixní sloupec

Aby se obsah sloupců nepřekrýval, přidá se pravému pružnému sloupci levý padding o stejné hodnotě jako je šířka fixního sloupce nebo hodnota záporného marginu. Pro zachování šířky je nutné použít obsahový box-model – box-sizing: border-box, jinak by se odsazení k šířce přičetlo a sloupce by se vedle sebe opět nevešly.

Pravý pružný sloupec
Levý fixní sloupec

Jak je na ukázce díky průhlednosti vidět, oba sloupce se stále překrývají. To ale ničemu nevadí, jen není dobré pravému sloupci nastavovat pozadí, ale použít ho pouze pro vyhrazení prostoru, kam se vloží další <div>.

Větší hodnotou levého paddingu než levého marginu jde snadno vyrobit odsazení mezi sloupci:

Pravý pružný sloupec
Levý fixní sloupec

Fixní sloupec vpravo

Měl-li by být fixní sloupec vpravo, stačí jen nahradit left za right v odsazení (margin a padding) a obtékání (float):

Levý pružný sloupec
Pravý fixní sloupec

Na pořadí v HTML kódu nezáleží. První může být levý i pravý sloupec, což se hodí pro následné zrušení sloupců pro zobrazení na mobilech.

Tabulka

Docílit podobného výsledku jde také pomocí tabulky. Tedy přesněji tabulkových hodnot vlastnosti display.

Pokud se nastaví tabulce 100% šířka a jednomu ze sloupců fixní, druhému sloupci se dopočítá.

Řešitelné je i prohození sloupců v HTML kódu.

Tabulky bez zadaných rozměrů ale není moc dobré používat pro layout, protože prohlížeč do stažení celého obsahu neví, jak bude ve finále tabulka vypadat.

Stejným problémem trpí i flexboxy.

Nejelegantnější řešení nabízí grid layout od Microsoftu, je ale zatím podporován pouze v IE 10+ a MS Edge.

Absolutní posicování

V případě, že je jisté, který ze sloupců bude vždy nižší, může se ten nižší absolutně naposicovat do paddingem vyhrazeného prostoru.

  • Živá ukázka – absolutně posicovaný sloupec s fixní šířkou

Odkazy jinam

To je všechno. Líbil se vám článek a chcete se dozvědět, až vyjde další?

Sledujte:

 

Připomínky mi pište do komentářů ↓

Stejně vysoké sloupce

Sloupce stejně vysoké

Různé možnosti, jak zajistit automatické roztažení různě vysokých sloupců na stejnou výšku.

Hlavička a patička přes celou šířku

Části webu přes celou šířku

Jak jen některé části webu roztáhnout přes celou šířku.

Převod sloupců na procenta

Převod sloupců na procenta

Jak převést fixní sloupcové rozložení na procenta, která se budou přizpůsobovat šířce okna.

Obtékané boxy s proměnlivou šířkou

Obtékané boxy s proměnlivou šířkou

Jak udělat, aby se obtékané boxy přizpůsobovaly proměnlivé velikosti okna.

Responsivní menu

Responsivní navigace

Jak udělat elegantní navigaci pro zobrazení na malých obrazovkách.

Komentáře