Thread CSS: div, float, clear: Probleme mit IE (3 answers)
Opened by Alex at 2006-07-20 22:38

Alex
 2006-07-20 22:38
#24848 #24848
User since
2003-12-04
285 Artikel
BenutzerIn
[default_avatar]
Hallo Zusammen,

Bin gerade dabei ein Template zu erstellen. Eigentlich ein ganz einfaches 3-Spalten-Ding.

Das Problem: Stellt Euch mal so drei Spalten vor. In der mittleren der Content. Dieser mittlere div hat einen Rahmen (im Beispiel unten der Schwarze). Der linke div soll nun etwas über dem linken Rand des Contentrahmens überlappen. Der rechte div soll recht neben dem Contentrahmen stehen. Soweit so gut. Nun ist aber wichtig, dass der mittlere div (also auch der Rahmen) immer die minimale Höhe der drei div's hat. D. h. egal ob links, mitte oder rechts den meisten Inhalt hat soll der Rahmen immer auf gleicher/unterster Höhe abschließen.

Hier mal mein Versuch. Im FF sieht es so aus wie es soll. Der IE dreht total am Rad.
Code: (dl )
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<HTML>
<HEAD>
<TITLE>Template</TITLE>

</HEAD>

<BODY>

<!--openBORDER-->
<div style=" position:relative;right:80px;width:645px;margin: 0% auto;border:2px solid �text-align:left;background-image:url(hg_main.jpg);background-repeat:no-repeat;background-position: 0% 100%;">

<!--openPUSHER-->
<div style="margin: 0% -200px 0% -40px;border:2px solid #ff0000;">

<!--openLEFT-->
<div style="float:left;margin:0px 0px;width:170px;border:2px solid #00cc00;">
<p>Leftinhalt</p>
<div style="clear:both;"></div>
</div>
<!--endLEFT-->

<!--openCONTENT-->
<div style="float:left;margin:0px 0px 0px 20px;width:55%;border:2px solid #ffff00;">
<p>Contentinhalt</p>

<div style="clear:both;"></div>
</div>
<!--endCONTENT-->

<!--openRight-->
<div style="float:right;margin:0px 0px 0px 20px;width:170px;border:2px solid #0000ff;">
<p>Rightinhalt</p>

<div style="clear:both;"></div>
</div>
<!--endRIGHT-->

<div style="clear:both;"></div>
</div>
<!--endPUSHER-->

</div>
<!--endBORDER-->

</BODY>
</HTML>

Habe mal allen div's einen farbigen Rahmen gegeben, damit es auch zu sehen ist. Der schwarze ist der spätere Rahmen. Grün das Menü links. Blau das Menü rechts. Rot benutze ich als Pusher um den schwarzen Rahmen eben immer nach unten drücken zu können, egal welche Seite am längsten ist.

Habe ich mich verständlich ausgedrückt?

Wie bekomme ich das nun auch für den IE hin?

Hat jemand eine schönere, sinnvollere, funktionierendere Schreibweise für mich?

Vielen Dank für Eure Hilfe!

Alex
<center>Schönen Gruß, Alex
Mit dem Computer geht alles viel schneller - es dauert nur ein bißchen länger!
</center>

View full thread CSS: div, float, clear: Probleme mit IE