Autor Zpráva
Anonymní
Profil *
Ahoj,

chtěl bych se zeptat jestli někdo nevíte jak udělat dvousloupcový layout - levý sloupec musí mít pevnou šířku, pravý se roztahuje po zbytku šířky stránky. V kódu pak musí být, ale ten pravý před levým, aniž by bylo použito absolutního pozicování.

Moc děkuju
Timy
Profil
<style>
#pravy {width:80%; float:right; background:red}
#levy {width:20%; background:green}
</style>

<div id="pravy">
pravý sloupec
</div>
<div id="levy">
levý sloupec
</div>
jerry
Profil *
Timy

ta šířka musí být pevná, tedy např. 200px

PS. omlouvám se zapoměl jsem se před tím podepsat ;o)
jerry
Profil *
u toho levého pevná jinak plovoucí ;o))
Timy
Profil
jerry
no jo, toho jsem si všiml pozdě. Tak to mě v tom případě nic nenapadá, leda tohle, ale tady je zase absolutní pozicování, ale jenom decentní:


<style>
#pravy {width:100%; background:red; position:absolute; padding-left:200px;}
#levy {width:200px; background:green; position:relative; z-index:10;}
</style>

<div id="pravy">
pravý sloupec
</div>
<div id="levy">
levý sloupec
</div>
Dero
Profil
Timy: V tom případě bude dokument široký 100% + 200px
jerry
Profil *
Timy

no takhle to umím právě taky, ale potřeboval bych to bez pozicování - teda pokud vůbec něco takového jde :o(
Timy
Profil
Dero
no jo, toho jsem si nevšiml. Tak stačí tam přidat * {-moz-box-sizing: border-box;}, ale to asi není to pravé ořechové.

jerry
Tak to v tom případě nevím...
Dero
Profil
ale potřeboval bych to bez pozicování

IMHO to v tom případě vyřešit nelze. Porozhlédni se tady (http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html), ale AFAIK tam příslušné řešení není.
Petra
Profil
#oba{width:100%;overflow:hidden}
#levy{float:left;width:200px;background:green}
#pravy{float:right;width:100%;margin-right:-200px;background:red}
#obsah{margin-right:200px}

<div id="oba">
<div id="pravy">
<div id="obsah">
pravý sloupec
</div>
</div>
<div id="levy">
levý sloupec
</div>
</div>

Ten #obsah je tam aby se přeezlých 200px odříznutých pomocí overflow zobrazilo a nebylo odříznuto. Testováno na nejnovějších IE, FF, Opera. Na Operu bacha, tam to neběží bez (možná striktního) Doctype.
Dero
Profil
Vida, řešení podobné Petřinu mne napadlo, ale nefungovalo mi. :o(

Tak jen doplním, že pro IE 5+ je potřeba upravit CSS následovně:

#oba{width:100%;overflow:hidden}
#levy{float:left;width:200px;background:green; overflow: hidden;}
#pravy{float:right;width:100%;margin-right:-200px;background:red; overflow: hidden;}
#obsah{margin-right:200px;}

Protože v případě naplnění boxů kurzívou by se layout v IE nechutně rozložil na prvočinitele.
Anonymní
Profil *
K tématu css/2 sloupcový layout:
už někdo vymyslel inteligentní řešení, jak udělat dvousloupcový layout v css aby měl každý sloupec jinou barvu pozadí a přitom nemusel používat tenký obrázek s proužkem na pozadí? To šlo snad jen v tabulkách a rámech.
Jediné jiné řešení, co jsem zatím viděl, je (jak taky píše Yuhů) to s tou velkou výškou a modlením se aby náhodou obsah sloupce nebyl vyšší - dost často je totiž vidět že to nevyjde. Nebo na to designéři slušně řečeno rezignují a dají oba sloupce stejnou barvou.
Timy
Profil
Anonymní
něco takového? http://llook.wz.cz/weblog/spot/layout-se-stejnou-vyskou-sloupcu.php
Leo
Profil
"už někdo vymyslel inteligentní řešení, jak udělat dvousloupcový layout v css aby měl každý sloupec jinou barvu pozadí a přitom nemusel používat tenký obrázek s proužkem na pozadí?"

Jde to pomoci tlusteho border v dane barve, ale samozrejme ne pro vsechny pozadavky (napr. nemuze byt sirka toho sloupce pruzna - border to neumi). Leo
Anonymní
Profil *
Timy
jo, to by mohlo být ono, díky :-)
Toto téma je uzamčeno. Odpověď nelze zaslat.