ugrás a tartalomhoz

CSS segítséget kérek

fisher · 2009. Okt. 6. (K), 14.16
Kicsit kezdek megőrülni, már a w3c "Visual formatting model"-jét olvasgatom kínomban
de nem tudok rájönni, hogy hogyan lehetne megoldani azt, ami nekem kéne:

<html>
<head></head>
<body>

<div style="margin-left: auto; margin-right: auto; width: 400px; border: 1px solid red; position: relative;">

 <div style="top:10px; left: 10px; height:40px; width:40px; border: 1px solid green; position: relative;">
 </div>

 <div style="top:10px; left: 60px; height:25px; width:40px; border: 1px solid black; position: absolute;">
 </div>

 <div style="top:40px; left: 60px; width:40px; border: 1px solid blue; position: absolute;">
 Abrakadabra<br>
 Abrakadabra<br>
 Abrakadabra<br>
 Abrakadabra<br>
 Abrakadabra<br>
 Abrakadabra<br>
 </div>

</div>
http://fisher.hu/t1.html

A probléma az, hogy a "piros" keret nem fogja körbe az "Abrakadabra" részt, pedig az kéne, de nagyon.

Részemről nem vagyok webész, csak én kaptam a nemes feladatot, hogy a céges weblapot megcsináljam, és most nagyon jó nekem.
‹ PHP-->JavaScript Prototype vs jQuery ›
 ■
1

pozition: absolute

Poetro · 2009. Okt. 6. (K), 14.20
Mivel az "Abrakadabra" rész abszolút van pozicionálva, ezért kiesik a dokumentum folyamából (document flow), ezért olyan mintha nem is lenne ott, ezen okból nem veszi körbe az "Abrakadabra" blokkodat.
Amennyiben float-ot szeretnél használni, akkor szükséged lenne egy clearfix-re a float-olt tartalmak után.
2

Nem tudom, hogy mit csinálok

fisher · 2009. Okt. 6. (K), 15.21
Nem tudom, hogy mit csinálok rosszul, ez a "rossz" lap:

http://fisher.hu/t1.html

Ez pedig a "jó":

http://fisher.hu/t3.html

Lehet, hogy rossz helyre teszem a clearfix-et? A http://www.webtoolkit.info/css-clearfix.html alapján csináltam, de valamit úgy lászik, hogy elbénázok...
3

Mit szeretnél pontosan csinálni?

Chaar-Lee · 2009. Okt. 6. (K), 15.54
Tudnál egy képet mellékelni, vagy egy leírást arról, hogy mit is szeretnél elérni?
Mert ez a minden div-nél position:absolute tuti nem lesz jó :)
4

Azt, ami a t1.html-ben van,

fisher · 2009. Okt. 6. (K), 16.32
Azt, ami a t1.html-ben van, csak a piros keretnek körbe kéne futnia mindhárom div-et. A három div úgy helyezkedik el, ahogy a "nagy" oldalon kell elhelyezkednie, csak az sokkal bonyolultabb, nem akartam elkavarodni benne, ezért csináltam egy egyszerűbb oldalt, amiben csak a div-ek vannak, amikbe bele tudom dobálni a menüt balra, a képet a kiskockába, a szöveget meg az abrakadabra helyére. Csak az egészet középre kéne tenni egy szép keretbe.
5

Remélem erre gondoltál

Chaar-Lee · 2009. Okt. 7. (Sze), 00.49
http://chaarlee.hu/dl/fisher.html

Itt most mindegy, hogy a d1 vagy d23 magassága lesz a nagyobb, a piros doboz hozzá fog igazodni.
6

Áh, tökéletes :) Akkor ha jól

fisher · 2009. Okt. 7. (Sze), 10.23
Áh, tökéletes :) Akkor ha jól értem, a lényeg az, hogy a flow mindenképpen megmaradjon (tehát el kell felejteni az absolute pozíciót), illetve a clear both meg "széthúzza", "lehúzza" a környező div-et?

Hm, pedig ezt még hozzáírtam: köszönöm a segítséget, magamtól sose találtam volna ki :)
(megviccelt az előnézet :))