Autor Zpráva
Pavel Straka
Profil
Dobrý večer, rád bych požádal o radu. Můj problém.

Mám 2 <divy> vedle sebe (oba mají nastaveno float:left), pod nimi je <div> (clear:both a margin-top:10px). Problém je, že ten spodní div je "přilepený" k těm dvěma horním - nezobrazí se ten horní okraj. Napadá někoho řešení jiné, než "obalit" horní divy do dalšího divu nebo nastavení dolnímu overflow:auto a 100% (o těchto řešeních jsem se dočetl, ale nemohu použít, neboť divy se zobrazují na základě uživatelova nastavení - jde o jednoduchou možnost úprav vzhledu webu ze strany uživatele).

Děkuji
Petr ZZZ
Profil
Živá ukázka nebo aspoň ukázka kódu by nebyla?

(Tohle – „clear:both a margin-top:10px“ – není syntaxe CSS: chybí minimálně jeden středník a nemá tam co dělat a.)
Pavel Straka
Profil
Ukázka kódu:
<div style="float:left;">div 1</div>
<div style="float:left;">div 2</div>
<div style="clear:both; margin-top:10px;">div 3</div>

mezi divem 3 a divy 1 a 2 není žádná mezera.
joe
Profil
Pokud nechceš obalovat ty dva divy, tak zkus toto:

<div style="float:left;">div 1</div> 
<div style="float:left;">div 2</div> 
<div style="clear:both; margin-top:10px; position: relative; top: 10px;">div 3</div>
Petr ZZZ
Profil
Tohle by mělo (taky) fungovat:

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <style type="text/css">
            body, html, div {margin:0; padding:0;}
            .d1, .d2 { float:left; width:200px; height:100px; }
            .d1 { background-color:red; }
            .d2 { background-color:blue; }
            .d3 { background-color:green; width:200px; height:300px; margin-top:1px; }
            .cistic { clear:both; line-height:0; font-size:0; }
        </style>
    </head>

    <body>
        <div class="d1">div 1</div> 
        <div class="d2">div 2</div> 
        <div class="cistic"> &nbsp; </div>
        <div class="d3">div 3</div>
    </body>
</html>

Zobrazuje se to shodně v IE6 a FF 3.0.4 (jiné jsem nezkoušel :-).
Je možné, že tam jsou nějaké zbytečnosti (nejsem si jistý, zda cviky jako line-height:0 nebo font-size:0 jsou zbytečné nebo zda jsou zapotřebí kvůli shodnému zobrazení i v některých starších prohlížečích). Barvy pozadí jsem tam samozřejmě dal jen pro kontrolu zobrazení.

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: