ugrás a tartalomhoz

CSS divek - float problema ?

zoliky · 2008. Júl. 24. (Cs), 21.18
Letezik 3 DIV amely egy kuldo DIV-be van becsomagolva, itt abrazolom:
<div id="container">
   <div id="div1">
   elso
   </div>

   <div id="div2">
   masodik
   </div>
   
   <div id="div3">
   harmadik
   </div>
</div>
Szeretnem a harom div-et (div1, div2, div3) egymas mellet latni (harom oszlop). Megprobaltam floatolni oket:

#div1 {
  float: left;
}

#div2 {
  float: left;
}

#div3 {
  float: right;
}
A problema az, hogy a kuldo DIV (#container) ebben az esetben nem fogja a harom div-et ossze. Itt lathato az eredmeny - a debughoz ezt hasznaltam: * { border: 1px solid black; }

http://img254.imageshack.us/img254/5420/79850335is8.png

Ha ezt beadom:
#container {
  padding: 4px;
}
a padding csak a harom div-nek a felso reszere ervenyes !
Hogyan lehetne megoldani a problemat ? Elore is koszonom!
‹ CSS div formázási probléma IE alatt Saját egyedi fontokat weblapokra lehet? ›
 ■
1

Ez normál!

Ustak · 2008. Júl. 24. (Cs), 22.44
A floated elemek kijövének a "dokumentum áramlatából :-))" (document flow) Ezért az tartalmazó div nem fogja körül öket. Ám ha egy negyedik divet raksz a container-be a legaljára, és annak a clear:both; css tulajdonságot adod, akkor megoldva a probléma.
Szintén lehetőség ha mindent floatolsz, tehát a containert is.
Nem emlékszem már pontosan, de mintha ie ben lenne egy bug, amikor az üres divnél nem úgy viselkedik a clear:both tulajdonság mint ahogy elvárnánk, ezért egy &nbsp;-t bele lehet rakni (de lehet hogy ez nem igaz, nem tudom már miért ugrott be...)
2

clear: both;

pekka · 2008. Júl. 24. (Cs), 22.44
Szia!
A megoldás, hogy teszel egy negyedik div-et a container-be, aminek clear: both tulajdonságot adsz.
3

extra div nélkül is megy

yaanno · 2008. Júl. 25. (P), 08.51
Egy további lehetőség, hogy a #container elemnek adsz egy további tulajdonságot

#container {
overflow: auto;
}
Az olyan megoldásokat, ahol egy div vagy br elem segítségével törlöd a floatot, végső esetben alkalmazd, mert több gondot okoz később, mint amennyivel kényelmesebb a tisztán css alapú megoldásoknál.
4

Nahát!

Ustak · 2008. Júl. 25. (P), 20.08
Ez érdekes, sokat css-eztem már de erről nem tudtam, mindig clearoltam a floatot, vagy mindent floatoltam. Miért van ez? Nem csak azt jelenti, hogy ha a tartalom túllóg a az elemen, akkor megjelenik a scrollbar és kész? A w3shools-on nem is utalnak rá...:-)
6

no magic

yaanno · 2008. Júl. 26. (Szo), 00.45
semmi mágia :) itt egy megoldás, és még néhány másik

persze óvatosan, mert bizonyos esetekben előjöhet a scrollbar
9

Ie 4 alatt is!

Ustak · 2008. Júl. 26. (Szo), 09.43
És nézem, ie 4 alatt is működik.
Hihetetlen.
10

koszi a linket

toro · 2008. Júl. 26. (Szo), 10.27
koszi,
a SitePoint overflow:auto-s ajanlasa jol hanzik
az hogy NS4 alatt nem megy nem igazan erdekel, de a "Certain combinations of margin and padding can force internal scrollbars" mondat odafigyelesre kesztet. Ugyanakkor ez azt is mondja, hogy csak a tartalom generalasa nem veri szet a dolgot, tehat a "hiba" mar a fejlesztesi szakaszban megmutatkozik - ekkor majd szepen jon a <br class="clear">, ahogy eddig is volt

a masik cikk ugy velem nagyon becsuletes, ferfias dolog es Tony Aslett anyukaja buszke lehet fiacskajara, megsimogathatja a buksijat, ugyanez vonatkozik a cikk iroira is, de amit kozreadtak az gyakorlatilag hasznalhatatalan.
a cikk vegen kicsit olyan erzesem volt, mint azon a specialkollegiumon, ahol axiomatikus alapon epitettek fel a fizikat - jo, jo, de minek?
11

no magic - again

yaanno · 2008. Júl. 26. (Szo), 12.59
Mint említettem, nem mágiáról van szó, és tényleg óvatosan kell bánni vele.

Hadd tegyem hozzá, hogy a PE linken adott megoldás sem rossz, sőt! A Blueprint frameworkben is azt használják, s ha jól látom a YAML is ezt alkalmazza.

Az, hogy html taget használsz float törlésre, a te dolgod, és amíg nem terjed el a CSS3 motiválta layout modul, használd nyugodtan. Ettől függetlenül nem baj, ha alternatív (!= vudu) módszereket is ismer az ember.
8

Van egy hátránya ...

Max Logan · 2008. Júl. 26. (Szo), 09.15
... ennek a megoldásnak FF alatt. Van pl. egy 800 px széles div (margin-nal középre igazítva), aminek megadod az overflow: auto-t. Ha a div mellett kattintasz a bal oldalán, akkor a FF szépen kijelöl mindent ami a div-ben van. Ez elég zavaró tud lenni.
12

:?

fchris82 · 2008. Júl. 26. (Szo), 16.04
Az overflow: auto nekem csak FF alatt működik. Se IE7, se IE6 alatt nem. A 'float'-olás viszont működik... Vagy rosszul értettem, és IE alatt nem is kéne működnie, esetleg rosszul csináltam vmit :?
5

div div div

nemalevi · 2008. Júl. 25. (P), 22.53
Mindenki annyira odavan ezert a div-es megjelenitesert, pedig szerintem neha nem harap a tablazat sem. Sokkal kiszamithatobban mukodik, mint egy ilyen osszefloatolt div csoda.
7

flame

solkprog · 2008. Júl. 26. (Szo), 09.01
Nem ezt kérdezte a kérdező. Egyébként nem értek veled egyett. De Új téma

üdv,
Balázs