Keskustelu: Nettisivujen teko: HTML + Div

Miten saan laitettua divin menemään silleen, että se menee selaimen vasemmasta reunasta oikeaan reunaan, niin et se on sillee jämpti?

Edit. Voi hitto tää meni väärälle alueella! :P

CSS:
jorma.div {
  width: 100%;
}

HTML:
<div class="jorma">
diipadaapa
</div>

?

EDIT: Niin tai ilman CSS:ää luulisin, että näin:

<div width="100%">
diipadaapa
</div>

Kiitos vastauksesta!

Mutta jatkan vielä toisella kysymyksellä... Eli kun laitoin kaksi diviä kolmannen divin sisään, ja yritän saada ne vierekkäin, niin miten se tapahtuu kun se heittää se toisen divin aina sinne "alas"?

Käytät float: left; niin lähtee pelittämään.

<div width="300px">

<div style="width: 150px; float:left;">Tähän tekstiä.</div>

<div style="width: 150px;"> Tähän myös.</div>

</div>

Kannattaa myös säätää margin-left jälkimmäiselle diville, ettei sisältö pomppaa sitten sen vasemmalle sijoittuneen alapuolelle heti kun sen vasemman pituus loppuu ja oikeassa on enemmän sisältöä.

Ja sen verran vielä tuohon alkuperäiseen kysymykseen, että div-elementti on oletuksena lohkotason elementti ja se kyllä ottaa leveyssuunnassa niin paljon tilaa kuin vain saa. Eli jos haluaa elementin reunasta reunaan, niin elementin äitielementille padding nollaksi ja itse elementille marginaali vastaavasti nollaksi mikäli sillä sitä jostain syystä on. Ja CSS:ssä luokan tyyli määritellään siis div.jorma { /* tyylit */ } eikä toisinpäin :)

Mutta entäs saako divejä menemään, niin että kun mulla nyt on kaksi vierekkein, ja molempien tulisi venyä vaikka vain toiseen tulise tekstiä. Pystyykö divit laittaa niín menemään?

Saa kyllä, jos jaksaa vähän säätää IE:n takia. Pistää vaan isäntäelementtiin display : table; ja lapsielementteihin display : table-cell; niin olet jo kovasti vauhdissa. Mikään IE ei vaan vielä tue tuota, joten sitä varten täytyy tehdä tämä sama floattisysteemi, mutta sillä tavoin että niiden korkeusarvoa säädetään tyyliin height : expression(isantaelementinnimi.height - this.paddingTop - this.paddingBottom - this.borderTop - this.borderBottom)); - ja huomiona että nuo this-jutut ei taida toimia, mutta laitoin ne noin jotta tiedät että nuo pitää ottaa huomioon. Muuten saat IE:n joka lukitsee itsensä!

Tässä on linkki mallisivuun

Muoks!
Kah, olin unohtanut testata IE6:lla ja IE5.5:llä. Noh, nyt saa sitten kattella että mikä niissä kiikastaa...

Muoks 2!
Eipä ollut kumma vika, johtui #contentissa olleesta paddingista mikä aiheutti IE6:ssa pienen renderöintivian ja siten jämähdyksen. Korjattu muuttamalla se vaan borderiksi. IE5.5 saa olla korjaamati.