Keskustelu: Nettisivujen teko: CSS: Div kuvan alla

Hei taas putkalaiset! Nyt olisi aihealueena CSS. Ongelmana on se, että headerissa on kuva, joka taas klikkauksella näyttää javascriptin avulla uuden laatikon. Ongelma on se, että klikkauksella oleva laatikko menee sivun alkuun, tietenkin: enhän ole asettanut sille omaa sijaintia. Kuva (joka aukasee JS-ikkunan) on asetettu tyylitiedostossa näin:

#header img {
margin-left: 3%;
}

Välissä on muuta hösseliä (mm. logo ja etsi-laatikko), joten en käyttänyt left-/right-tageja.

Eli, kun ilmoitan tuon prosenttimääräisesti, niin miten olisi mahdollista, että tuossa kuvassa olisi ns. magneetti, joka vetää tuota div-boxia kokoajan mukanaan? Alla nykyinen ja haluttu versio:

Nykyinen (klikattuna kuvaa):

     HEADERLOGO    E-T-S-I-L-A-A-T-I-K-K-O    KLIKATTAVAKUVA
------------------------------------------------------------------
|                 |
|Klikkasit kuvaa! |
|                 |
-------------------

Haluttu (klikattuna kuvaa):

     HEADERLOGO    E-T-S-I-L-A-A-T-I-K-K-O    KLIKATTAVAKUVA
------------------------------------------------------------------
                                            |                 |
                                            |Klikkasit kuvaa! |
                                            |                 |
                                            -------------------

Saa kysellä, mitä oikein tarkoitin/epäselvistä kohdista rohkeasti. (kirjoitusvirheitä saattaa sisältyä tähän, mutta korjailen jos sellasia näkyilee: jos tarvis)

PS. Laatikossa on "nuoli" (linkki generaattoriin), joka pitäisi olla sen kuvan alla.
PPS. Googletettua on tullut, ja niin epäselvää hössötystä minulle, ettei mitään selkoa saanut.

Yksi vaihtoehto on laittaa kuva sekä laatikko saman divin sisään ja asettaa laatikolle absoluuttinen sijainti.

<div id="header">
	<img src="..." id="headerlogo">
	<input type="text" id="etsilaatikko">
	<div id="klikattavakuva">
		<img src="...">
		<div>Klikkasit kuvaa</div>
	</div>
</div>

#klikattavakuva {
	position: relative;
}
#klikattavakuva div {
	position: absolute;
	top: 100%;
}