Autor Zpráva
neregistrovaný
Profil *
Zdravím,
mám menší problém, kterému nějak nerozumím. Mám na stránce dva divy (obsahující nadpis + seznam), kdy jeden plave vlevo a druhý vpravo. Tím se zobrazí vedle sebe. Pod tyto dva divy je umístěn nadpis, který má nastavený clear: both, aby již neobtékal.
Když ale nastavím tomuto nadpisu margin-top na třeba 70px, tak bych předpokládal, že se tento prostor přidá mezi ty divy a nadpis a vytvoří se prostor. Jenže ten nadpis vůbec "nereaguje" a když nastavím ten margin, tak se nadpis ani nepohne.

Čím to a co s tím?

Děkuji za jakoukoliv radu.
Anonym
Profil
neregistrovaný:
Ahoj, mělo by to fungovat takhle:
<style>
    .clear:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
</style>
<div class="clear">
    <div id="nadpis1" style="float: left; font-size: 1.6em">Nadpis 1</div>
    <div id="seznam" style="float: right; width: 260px; border: 1px dotted">Seznam</div>
</div>
<div id="nadpis2" style="font-size: 1.6em; margin-top: 70px">Nadpis 2</div>
neregistrovaný
Profil *
Pokud tomu rozumím, tak mám ty dva divy uzavřít do jednoho divu kterému nastavím tu skrytou tečku?

Pro jistotu můj kód:
HTML:
<div id="obsah-960"> 
<div id="levy-sloupec">
        <h2>Nadpis h2:</h2>
        <ul>
          <li>položka seznamu1</li>
          <li>položka seznamu2</li>
          <li>položka seznamu3</li>
        </ul>
      </div>
      <div id="pravy-sloupec">
        <h2>Nadpis h2</h2>
        <ul>
          <li>položka seznamu1</li>
          <li>položka seznamu2</li>
        </ul>
      </div>
      <h2 class="nadpis-pod-divy">Nadpis</h2>
      </div>

CSS:
div#obsah-960 {
                 width: 960px;
                 margin: 0 auto 0 auto;
                 padding-top: 1px;       /* Oprava sloučených okrajů */
                }
                
    div#levy-sloupec {
             width: 465px;
             float: left;
             margin-top: 50px;
            }
            
    div#pravy-sloupec {
              width: 465px;
              float: right;
              margin-top: 50px;
             }
             
    h2.nadpis-pod-divy {
                      clear: both;
                      font: 20px/100% Arial, sans-serif;
                      margin: 70px 0 0 0;
                      background: url("images/icon.gif") top left no-repeat;
                      padding-left: 40px;
                     }

Rád bych věděl, proč se to chová tak jak se to chová a co s tím. Ten uvedený trik znám v případě, že jsou dva plovoucí divy uvnitř nějakého divu s pozadím a jelikož jsou plovoucí, tak "uniknou" mimo ten obalovaný div. Ale v tom mém případě nějak nerozumím chování prohlížeče a proč se takto chová. Já jsem původně myslel, že se tímto způsobem obejdu bez toho obalovací divu u těch dvou sloupců (abych divy zbytečně neplýtval).
Anonym
Profil
neregistrovaný:
Ano, já bych to tak udělal:
<style>

div#obsah-960 {background: #abc;
                 width: 960px;
                 margin: 0 auto 0 auto;
                 padding-top: 1px;       /* Oprava sloučených okrajů */
                }
                
div#levy-sloupec {background: #bac;
         width: 465px;
         float: left;
         margin-top: 50px;
        }
        
div#pravy-sloupec {background: #cba;
          width: 465px;
          float: right;
          margin-top: 50px;
         }
         
h2.nadpis-pod-divy {
                  font: 20px/100% Arial, sans-serif;
                  margin: 70px 0 0 0;
                  background: #bca url("images/icon.gif") top left no-repeat;
                  padding-left: 40px;
                 }

#horni-cast:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}

</style>
<div id="obsah-960">
  <div id="horni-cast"> 
    <div id="levy-sloupec">
      <h2>Nadpis h2:</h2>
      <ul>
        <li>položka seznamu1</li>
        <li>položka seznamu2</li>
        <li>položka seznamu3</li>
      </ul>
    </div>
    <div id="pravy-sloupec">
      <h2>Nadpis h2</h2>
      <ul>
        <li>položka seznamu1</li>
        <li>položka seznamu2</li>
      </ul>
    </div>
  </div>
  <div id="spodni-cast">
    <h2 class="nadpis-pod-divy">Nadpis</h2>
  </div>
</div>

Tak tohle vám asi bude muset vysvětlit někdo jiný, ale myslím si, že je to jak jste říkal. Protože jsou plovoucí, tak "uniknou" a prohlížeč pokračuje (dává nadpis) dál do dokumentu a nebere ty plovoucí divy že jsou tam umístěné.

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

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