Autor Zpráva
volpet
Profil
Zdravím,
pokouším se udělat takovou menší webovou aplikaci a narazil jsem na problém.

Trochu to zjednoduším, takže:
Mám 2 prvky zarovnané vedle sebe (float: left, right). Oba mají height: 100% a součet jejich šířek se rovná width: 100%. Levý prvek má fixní šířku dejme tomu 300px, pravý se přizpůsobuje šířce okna. Rád bych ale, aby měl pravý prvek nastavenou nějakou minimální šířku (min-width) a pokud by uživatel zmenšil okno natolik, že by se oba prvky vedle sebe nevešli, rád bych aby se na pravém prvku a to na ose x objevil scrollbar (overflow-x: auto;).

Dejme tomu že kód bude vypadat takto:

.left{
    float: left;
    height: 100%;
    width: 300px;
}
.right{
    float: right;
    height: 100%;
    width: calc(100% - 300px);
    min-width: 450px;
    overflow-x: auto;
}

A teď k problému:
Pokud okno prohlížeče zmenším natolik, že se oba prvky nevejdou vedle sebe, ten pravý se přesune pod levý. Já bych ovšem rád, aby oba prvky zůstali vedle sebe a na pravém se objevil scrollbar.

Je toto nějak možné vyřešit? S CSS3 dělám téměř poprvé, takže pokud je to primitivní problém, předem se omlouvám :)

Díky!
juriad
Profil
Když už máš takovou komponentovou aplikaci, proč nepoůžít pozicování?
http://kod.djpw.cz/jwgb
volpet
Profil
juriad:
Díky, pomocí absolute to funguje výborně ;)

Moderátor Petr ZZZ: Odmazány reakce na smazané příspěvky.

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm:

0