Keskustelu: Nettisivujen teko: Div-elementtiongelma

Heippa!

Askartelen kotisivujani ja kohtasin ongelman ulkoasun sommittelussa. Haluaisin saada sen näyttämään tältä:

+----------------------------
|         |                  |
|         |                  |
|   A     |        B         |
|         |                  |
|         |                  |
 ----------------------------
|            C               |
 ----------------------------
|                            |
|            D               |
|                            |
|                            |
|                            |
|                            |
 ----------------------------

Kirjaimet A, B, C ja D ovat kaikki divejä. A ja B edustavat logopalkkeja ja C-kohtaan tulee linkit. D sisältää loput sisällöstä.

Ongelmani on se, että kun onnistun asettelemaan elementit A ja B vierekkäin (wrapperin sisään) käyttämällä float-määritettä (A: left, B: right), puskee C-elementti niiden alle ja muodostaa ruman näkymän.

Yksinkertaistetusti:

<div id="wrapperi">
 <div id="A">
  päläpälä
 </div>
 <div id="B">
  pälä
 </div>
</div>

<div id="C">
 tämä tulee A:n ja B:n alle ikävästi
</div>

CSS:

#wrapperi {
 width: 800px;
 margin: 0 auto;
}

#A {
 width: 30%;
 float: left;
}

#B {
 width: 69%;
 float: right;
}

Kuinka onnistun asettelemaan kaikki elementit omille paikoilleen?

Jos B on alempana, laita näin:

#b {
display: inline; }

B:n pitäisi olla samassa tasossa kuin A:n, eli vierekkäin.

Siis, jos ne eivät ole samassa tasossa, laita tuo display siihen kumpi on alempana sillä hetkellä. Tai sitten voit laittaa div { display: inline; }

Asetin B:lle mainitsemasi ja siitä katosi taustakuva.

Aijaa. :o
No, en tiedä miksi. Tuon pitäisi laittaa kaksi samaa määritystä samalle riville.
Esim jos on kaksi formia ja laittaa form {display: inline} niin saa ne samalle riville.

#a { float: left; }

Muuta et tarvitse. HTML:ään kirjoitat näin:

<div id="a">A</div>
<div id="b">B</div>
<div id="c">C</div>
<div id="d">D</div>

Noinhan se meneekin. Taas tuli opittua uutta :)