Autor Zpráva
esotery
Profil
Dobrý den,

Mám problém s width u blokového elementu, který by měl mít width podlé svého contentu (jelikož má float: left nebo display: inline[viz. IE7 bug s inline-block] nebo position: absolute), ale má 100% šířku svého parenta.

Děje se to jen tehdy, pokud sou v onom blokovém elementu floaticí elementy, jeden s float: left a druhý s float: right.

Nevíte někdo co s tím?

Přikládám obrázek: Problém
mckay
Profil
esotery:
Těžké si to představit, nechce se ti hodit odkaz na živou ukázku?
esotery
Profil
[#2] mckay Díky za odpověď. Právě proto jsem nakreslil ten obrázek, který by ti měl pomoci si to představit:).
tiso
Profil
esotery: neviem ako ty, ale až takú predstavivosť nemám, aby som si z obrázku predstavil tvoje html+css, viem si predstaviť iba to, ako by som to robil ja. Ale písať to a skúšať či by to podľa toho i fungovalo - to má od predstáv ešte ďaleko.
Miloš
Profil
Zkusil jsem to nasimulovat a nevidím problém:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<meta http-equiv="content-type" content="text/html; charset=utf-8">

<style type="text/css">
  body {background-color: black;}
  #hlavni_obal {width: 900px; background-color: white; color: black;}
  #levy_blok {width: 430px; background-color: #fe0000; border: 10px dashed aqua; float: left;}
  #levy_blok p {width: 150px; border: 3px groove lime; padding: 15px; background-color: yellow; color: navy;}
  p {background-color: navy; color: yellow;}
  #levy_float {float: left;}
  #pravy_float {float: right;}
  hr {visibility: hidden; clear: both}
</style>

<title>float</title>

<div id="hlavni_obal">
  <div id="levy_blok">
    <p id="levy_float">Lákamí vůněhulás úmyval rohlivý jednovod lek ta úmyvalem ční Tanechřeh slušiv.
		     Dráček škověný dechyňský magne bájen čeprad zenžto pokemi přiroje obzor ne. 
    <p id="pravy_float">Přehliv Bický uměsí čuva bubený tavětraje kamítkoli umyva rozcuce prozzásko zenžto.
		     Spouzavěď oba večníky radložný ne hulákaj poda Lžičkamí rojskočár zako Nesmetít.
		     Obý dobývá rozem k ří Holehlíně lžičkočaj dechyňsko řícit ne jítkem. Lva čuvadi hal říc ne hodlo.
  </div>
    <p class="mimo">Nějaký blok vpravo
    <hr>
</div>
esotery
Profil
[#4] tiso OK. Nastíním teda html a css.

<div class="container">
  <div class="affectedElement">
    <div class="leftFloat"></div>
    <div class="rightFloat"></div>
  </div>
<div/>

.container {
  width: 900px;
}

.affectedElement {
  overflow: hidden; /*rusi float, aby se nezbortil*/
  float: left;
}

.leftFloat {
  width: 10px;
  height: 10px;
  float: left;
}

.rightFloat {
  width: 10px;
  height: 10px;
  float: right;
}


V každém slušném prohlížeči by měl mít .affectedElement šířku 20px. V IE7 má šířku .container(u), tedy 900px.
Miloš
Profil
Nastav pro .affectedElement šířku.
esotery
Profil
[#7] Miloš To je jediný možný fix? Já potřebuji, aby se .affectedElement roztahoval podle obsahu.
Miloš
Profil
Mám obavu, že ne, aneb Jak funguje "float" a "clear":
Rozměry plovoucích prvků
…Trošku složitější je to pouze se šířkou plovoucího prvku. U tzv. nahrazovaných prvků (např. u obrázků) problém není, ty mají svou šířku určenu implicitně. Ale u prvků ostatních může nastat problém. Pravidla pro jejich formátování se totiž během času několikrát změnila — nejprve (v CSS 2.0) platilo, že float musí mít šířku určenu, nyní (ve finální verzi CSS 2.1) už je doporučen algoritmus pro její automatický výpočet (Shrink-To-Fit). Ten by měl fungovat podobně jako u tabulek (hledá se optimální hodnota mezi minimální a maximální dostupnou šířkou) — ale ve stávajících prohlížečích tento postup ještě není spolehlivě implementován a specifikace CSS ani přesný postup nedefinuje. Nejčastější implementací je, že automatická šířka se použije u plovoucích prvků, které mají display:inline; zatímco u prvků s display:block musí být šířka explicitně určena, jinak si plaváček zabere celou dostupnou šířku (a nezbude tak místo, aby byl obtékán). Spolehnutí se na tento způsob implemantace se v současné době ukazuje jako zatím nejspolehlivější (auto-šířka u inline prvků, explicitně určená šířka u bloků).
esotery
Profil
[#9] Miloš Děkuju mnohokrát, tak mi teda nezbyde nic jinýho, než to udělat s absolutní šířkou:/.
Miloš
Profil
Možná ještě někoho něco napadne; je to ale mimo moji momentální představivost.
esotery
Profil
[#11] Miloš Ještě mě napadlo změnit .affectedElement z divu na span (který je nativně inline), to sice s sebou přináší jisté nevýhody(kvůli validitě) a prasí to sémantiku, ale na to nikdo nekouká, každý chce perfektní vzhled:).
Miloš
Profil
Zkus místo toho divu .affectedElement nastavit v CSS display:inline – protože je to plaváček, nestane se z něj inline, ale Explorer by to mohlo ošálit.
esotery
Profil
[#13] Miloš To mám, bohužel to nefunguje:/.
esotery
Profil
Bug, viz. : http://css-class.com/test/bugs/ie/float-auto-width-expansion-bug.htm

Vaše odpověď

Mohlo by se hodit

Nezapomeňte na odkaz na živou ukázku problému.

Prosím používejte diakritiku a interpunkci.

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