Autor Zpráva
HeWeR
Profil
Potřebuju:
- dva sloupce (dole patička, která následuje až za nima)
- pravý sloupec má fixní šířku s je přilepen na pravý okraj
- levý sloupec se roztahuje podle rozlišení

Už jsem tento problém řešil dříve, ale nepodařilo se mi to vyřešit na všech prohlížečích. Poloviční řešení jsem našel v:
.sloupec1 {}
.sloupec2 {float: right; margin-right: 0px; width: 300px; }
.paticka {clear: both; width: 100%; }

Jenomže v tomto případě by musel být sloupec2 v HTML před sloupcem 1, což je nežádoucí. Nikde na internetu jsem nenaše řešení a také jsem nenarazil na stránku, kde by to bylo a já se mohl "inspirovat". Děkuju za vaše postřehy
Plaváček
Profil
Nelze, pokud trváš na tom, že sloupec 2 má být v kódu až za sloupcem 1. Určité řešení skýtá absolutní pozicování (čili sloupec 2 umístíš do pravého okraje sloupce 1 o šířce 300px), ale zase narazíš na problém s patičkou, pokud sloupec 2 bude delší než sloupec 1.
Dero
Profil
No, je to smontované na koleni, ale zkus si poladit tohle:


<style type="text/css">
* { margin: 0; padding: 0; box-sizing: content-box; }
body { text-align: center; }
#wrap { width: 100%; margin: 0 auto; text-align: left; float: left; overflow: hidden; }
#sl1 { background: yellow; float: left; padding-right: 310px; }
#sl2 { background: gray; width: 300px; float: left; margin-left: -300px; margin-right: -300px; padding-right: 50px; }
* html #sl2 { width: 350px; }
#paticka { background: green; clear: left; }
</style>

<body>
<div id="wrap">
<div id="sl1">
Lorem ipsum dolor sit amet...
</div>
<div id="sl2">
Lorem ipsum dolor sit amet...
</div>
</div>
<div id="paticka">
Lorem ipsum dolor sit amet...
</div>
</body>


Funguje v IE5+, Opeře 7+ i ve FF, o starších prohlížečích však vzhledem k povaze kódu pochybuji. Moc šancí nedávám starým Mozillám a Operám, protože ty měly s pozicováním obecně problémy a text ořezávaly.
HeWeR
Profil
Dero
Dík moc. Poněkud jsem ten CSS zkrátil:
#sl1 {background: yellow; float: left; padding-right: 299px; }
#sl2 {background: gray; width: 300px; float: left; margin-left: -299px; }
#paticka {background: green; clear: left; }

Funguje to i bez wrap. Wrap ovšem na IE způsoboval problémy – nezobrazoval absolutně pozicované prvky před sloupcama.

Ten 1px rozdíl tam je, protože v Opeře se dělala vpravo právě 1px mezírka.

Testované: IE 6, IE 5.5; Opera 8, 9; FireFox. IE 5 to podivuhodně zalamuje, Opera 7 si tam vymýšlí mezery (ale jinak ok).
llook
Profil
Nějak jsem to nestudoval, ale jestli je to ten trik se záporným marginem, tak ten funguje dokonce i v Amaye. Viz http://llook.wz.cz/weblog/spot/layout-se-stejnou-vyskou-sloupcu.php
Dero
Profil
Rádo se stalo.

Ten 1px rozdíl tam je, protože v Opeře se dělala vpravo právě 1px mezírka.

Napříč prohlížeči se setkáš s vícero mezírkami, některé prohlížeče odsazují přetékající floatované prvky o pouze jim známý počet pixelů, proto jsem původně nasadil toleranci.

Funguje to i bez wrap. Wrap ovšem na IE způsoboval problémy – nezobrazoval absolutně pozicované prvky před sloupcama.

Možná by pomohlo umístění patičky do wrapu, případně čachry s pozicováním wrapu samotného.


Myslím, že s tím layoutem budeš mít ještě drobné problémy a pomaličku se přiblížíš té mé původné verzi. Jen takové tušení. :o) Každopádně hezkou zábavu.
HeWeR
Profil
llook
nn, jedná se o problém s plovoucí šířkou a fixně širokým pravým sloupcem :)
Toto téma je uzamčeno. Odpověď nelze zaslat.