Autor Zpráva
Levoš
Profil
Prosím mám dotaz. Když do bloku dám další blok a v tom jsou další bloky, který se obtékají, proč se velikost prvních dvou bloků nepřizpůsobí velikosti obsahu těch co obtékají. U prvních dvou nezadávám velikost, protože ji neznám. Ve sloupcích je text velkého rozsahu, další obsah a další bloky, obrázky atd. Jak se toto řeší ? Protože tím, že se nenatáhnou podle sloupců dělá to na stránce vážné problémy. Děkuji předem za radu.

<div style="background-color: #CC00FF; width: 800px; border: 5px solid #FF0000;"><!-- První blok hlavní  - nenatahuje se podle velikosti sloupců - proč ?-->
<div style="background-color: #CCCCCC;border: 2px solid #FF8888"><!-- Druhý blok vnitřní -  nenatahuje se podle velikosti sloupců - proč ?-->
<div style="background-color: #0080FF; width: 300px; height: 100px; float: left;">sloupec levý - nejaký velký obsah</div><!-- Levý sloupec  - délka 100px jen pro příklad, jinak ji nezadávám -->
<div style="background-color: #00FFFF; width: 300px; height: 100px; float: right;">sloupec pravý - nějaký velký obsah</div><!-- Pravý sloupec - délka 100px jen pro příklad, jinak ji nezadávám -->
</div></div>
Str4wberry
Profil
Tipoval bych, že chybí clear za posledním plavajícím <div>em.

Pokud byste chtěl ještě oba sloupce stejně vysoké, dá se to řešit třeba obrázkem.
Levoš
Profil
Dík za radu, ale pořád nevím proč. Clear asi není řešením, dělá něco jiného. Pro názornost vkládám obrázek ze stránky http://jecas.cz/float#clear

[img]http://www.lupicek.cz/s_obtok/sloupce01.png [/img]

a [img]http://www.lupicek.cz/s_obtok/sloupce003.png [/img]
peta
Profil
Ten modry musi byt display:inline-block a za poslednim uvnitr bys mel mit div s clear, aby zrusil obtekani.
A proc to dela, je uplne logicke. Plovouci prvek plave na radku, neroztahuje blok. Pokud nezmenis diplay:inline (radek) na neco jineho. Nektere prohlizece to delaji automaticky.
Edit2: A jo, ty tam mas div, ale ten se chova podobne.
Levoš
Profil
Díky moc. Pomohlo mi to display:inline-block. Super. Viz odkaz http://kod.djpw.cz/egc

To CLEAR nevím vůbec kam dát ?

Úplně dole vznikla malá mezera. ( fialová barva ) Nevíte jak odstranit ?

<div style="background-color: #CC00FF; width: 800px; display: inline-block; ">
<div style="background-color: #CCCCCC; width: 700px;display: inline-block; ">
<div style="background-color: #0080FF; width: 300px; height: 100px; float: left;">1. sloupec</div>
<div style="background-color: #00FFFF; width: 300px; height: 200px; float: right;">2. sloupec</div>
</div></div>
Trejpa
Profil
Levoš:
Úplně dole vznikla malá mezera. ( fialová barva ) Nevíte jak odstranit ?
Mezera pod obrázkem.

To CLEAR nevím vůbec kam dát ?
<div style="background-color: #CC00FF; width: 800px;">
<div style="background-color: #CCCCCC; width: 700px;">
<div style="background-color: #0080FF; width: 300px; height: 100px; float: left;">1. sloupec</div>
<div style="background-color: #00FFFF; width: 300px; height: 200px; float: right;">2. sloupec</div>
  <div style=clear:both></div>
</div></div>

Nebo to můžeš vyřešit i jinak:
<div style="background-color: #CC00FF; width: 800px;">
<div style="background-color: #CCCCCC; width: 700px; overflow: auto;">
<div style="background-color: #0080FF; width: 300px; height: 100px; float: left;">1. sloupec</div>
<div style="background-color: #00FFFF; width: 300px; height: 200px; float: right;">2. sloupec</div>
</div></div>

Zbytečně nastavuješ výšku. V případě potřeby použij minimální výšku (min-height).

Přetypování bloku na inline-block nefunguje ve starším IE a vlastně netuším, proč ho tady používáš.
Levoš
Profil
Díky moc. :) Vyřešil jsem to první variantou <div style=clear:both></div>.

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: