Dotaz: CSS, float a clear

[Jardík]

Dělám si web s použitím drupalu a vytvářím si téma (jeho vzhled) a mám nějaké problémy s atributy float a clear u divů. Popíšu situaci k obrázku. Pod tím vodorovným menu je div. Je vycentrovaný (margin-left: auto; margin-right: auto; width: 970). V tomto divu jsou dva postranní divy. Jeden má float: left, druhý right. Potom je v tomto divu další (prostřední) div. Ten float nemá. Má nastaven margin-left: šířka_levého_panelu; margin-right: šířka_pravého_panelu, takže je pak mezi postranními panely.

Problém je pak uvnitř toho prostředního divu. Jak tam je ten nadpis (Menu), tak vedle něj jsou normálně tlačítka, která jsou teď pod ním, protože se tam nevejdou, to je OK. Ten nadpis i tlačítka jsou každé v samostatném divu s float:left a jsou ještě zabalená do jednoho hlavního divu. Takže nějak takto:

Obal nadpisu (div)
  |-- div pro nadpis (float: left)
  |      |-- nadpis (h1)
  |-- div pro tlačítka (float:left)
         |-- inline nečíslovaný seznam s tlačítky

Aby ty 2 divy z obalu "nepřetékaly", tak má obal nadpisu i selektor after

obal-nadpisu {
  margin: 0 0 10px 0;
  padding: 0;
  border-bottom: 1px solid #e9eff3;
  position: relative;
  display: block;
}

obal-nadpisu:after {
    content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

A teď nastává problém. Ten clear zařídí bohužel to, že se celý obal nějak roztáhne až pod oba panely (viz obrázek, ta čára (ve skutečnosti je to rámeček toho obalu) uprostřed pod panelama), což by neměl. Správně by měl být přece pod nadpisem a tlačítky.

Zajímalo by mě, kde dělám chybu. To téma vzniká úpravou garland tématu, spousta kódu je z něho. Já bych ty nadpisy klidně udělal trochu jinak, ale mě zajímá, proč to takto nefunguje.

Odpovědi

Diskuse byla administrátory uzamčena.
FAQ: Proč byl uzamčen/smazán můj dotaz v Poradně?

[Jardík]

Tak jinak než editací stylů ten nadpis udělat nemůžu, generuje to takto přímo drupal.

[Filip Jirsák]

Podle mne se ten obal natáhne proto, že clear: both znamená "před tímto prvkem musí být ukončené veškeré plovoucí prvky vlevo i vpravo". A protože před příslušným prvkem máte plovoucí i levý a pravý sloupec, musí se prvek s clear:both umístit až za oba tyto sloupce.

Jinak výpis příslušné části HTML a CSS by byl daleko jednodušší a srozumitelnější, než ten zdlouhavý popis…

[Láďa]

Přesně tak, tohle clear znamená. A jinak :after co vím nepodporuje třeba IE6, takže jde jenom o hezkou, ale vcelku nepoužitelnou konstrukci.

[Filip Jirsák]

Tak on MSIE nezná ani centrování přes margin-left|right:auto, takže ten styl asi bude pouze pro moderní prohlížeče.

[Robert Krátký]

Ahoj, takový dotaz je v Poradně off-topic. Je sice tak kvalitně popsán, že by mohl být dáván za vzor mnoha tazatelům, ale přesto musím doporučit, abys to zkusil řešit na nějakém fóru, které je zaměřené na webdesign (nebo na abclinuxu v blogu). Diskuze bude uzamčena a později vymazána. Díky za pochopení.