Keskustelu: Nettisivujen teko: Ongelmia divin venymisen kanssa

Minulla olisi tämmöinen ongelma:

http://www.skeezu.net/~ninwi-fi/avatars/Ninwifi/perussivu.php

(Älkää url:sta välittäkö, sijoitin sen randomisti serverille :))

Tuo "keski1"-div ei veny, vaikka sen pitäisi. Diveissä "left" ja "right" on tekstiä ja näiden divien mukana pitäisi tuon "keski1"-divin venyä mukana... Ei näköjään luonnistu.

Oon vähän umpikujassa. En vaan tiiä mikä tossa on vikana, joten olisin todella kiitollinen, jos joku viitsisi hieman avittaa.

heplo kirjoitti:

Tuo "keski1"-div ei veny, vaikka sen pitäisi.

Jos luet speksiä, niin ei pitäisi ;)

heplo kirjoitti:

Diveissä "left" ja "right" on tekstiä

Tarkotat varmaankin #content ja #content2

Haluamaasi toimintaan tarvitset tuon #keski1-laatikon sisälle, noiden #contentien jälkeen jonkun elementin, jolle on asetettu clear: both;

Tässä tapauksessa nuo #content ja #content2 , sillä minua kehotettiin muuttamaan ne siksi... Siellä on #footer, jolle on annettu tuo arvo.

Jos luet speksiä, niin ei pitäisi ;) - Blaze

Selitä =)

Edit: Tuo #keski1 venyy vaan jos kirjotan suoraan sen sisälle. Eli: <div id="keski1">Nyt tämä venyisi<div id="content"></div></div>

heplo kirjoitti:

Siellä on #footer, jolle on annettu tuo arvo.

No niin, eikös tuo nyt ole niinku pitääki?

heplo kirjoitti:

Jos luet speksiä, niin ei pitäisi ;) - Blaze

Selitä =)

Floatoidut elementit poistetaan tavallisesta flowsta, jolloin ne ei vaikuta niitten isäntäelementin (containing block) kokoon.

Voit saada kuitenkin isäntäelementin ottamaan floatattujen elementtien korkeuden huomioon antamalla tälle tyylin overflow : auto; (overflow : hidden; ei valitettavasti toimi aina IE6:n kanssa, mutta voit kokeilla toimiiko se sinulla). Vierityspalkkeja saattaa tulla jos mitoituksissa on ongelmia/virheitä, mutta niistä pääsee kyllä eroon tarkistamalla arvoja jotka vaikuttavat leveyksiin ja sijoittumiseen. keskidivin korkeuteen tämä ei kuitenkaan vaikuta.

Elementtien korkeuden voi määritellä 100% jos isäntäelementillä on position : relative; ja lapsielementit irrotettu normaalista flowsta (position : absolute; tai float), mutta valitettavasti tämä toimii oikein vain uusimmissa selaimissa (Firefox 1, IE7, Opera 9).

Muita kiertotapoja on asettaa min-height -arvot siten, että kaikki elementit ovat aina vähintään tietyn korkuisia. IE6 ja aiemmat tosin kaipaavat sitten ehdollisilla kommenteilla samaisen arvon heightinä (käsittelevät virheellisesti heightiä min-heightin tapaan).

Merri, ympäri mennään, yhteen tullaan? Tunnenkin sinut Konsolifinin puolelta.

Overflow-temppu tepsi, en ole ennen edes kullu tuommoisesta. Kiitos sinulle paljon. =)