CSS: div, float, clear: Probleme mit IE (HTML, CSS und Javascript)

[thread]2306[/thread]

CSS: div, float, clear: Probleme mit IE

Leser: 1

Alex

2006-07-20 22:38

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 )

<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>

pktm

2006-07-21 01:08

User since
2003-08-07
2921 Artikel
BenutzerIn

Meine klassische Lösung dazu sind 1px hohe Grafiken, die ich mit CSS nach meinen Belgieben strecke / dehne. Ansonsten würd eich nich versuchen, die min-height - Eigenschaft auch auf alle Eltern-Elemente des aktuellen Elements anzuwenden. Das gibt zwar einen unheimlichen, undurchsichtigen, von CSS gerade zu vermeide gewollte Code, aber es funktioniert zumindest bei Schriftformatierungen.

http://www.intergastro-service.de (mein erstes CMS :) )

nepos

2006-07-21 12:27

User since
2005-08-17
1420 Artikel
BenutzerIn

Und generell ist leider grade der IE in Bezug auf CSS der Browser, der da mit am wenigsten kann und auch noch paar nette Bugs in petto hat :(

Alex

2006-07-22 07:21

User since
2003-12-04
285 Artikel
BenutzerIn
[default_avatar]

Habe es hinbekommen. Würde mich über Eure Kommentare oder Verbesserungsvorschläge sehr freuen! Vielen Dank! Alex

Code: (dl )

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<HTML>
<HEAD>
<TITLE>Template</TITLE>

</HEAD>

<BODY>

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

<!--openPUSHER-->
<div style="width:830px;margin: 0px -185px 0px 0px;border:2px solid #ff0000;">

<!--openLEFT-->
<div style="position:relative;right:35px;float:left;width:170px;border:2px solid #00cc00;">
<p>Leftinhalt</p>
</div>
<!--endLEFT-->

<!--openCONTENT-->
<div style="position:relative;left:0px;float:left;width:465px;border:2px solid #ffff00;">
<p>Contentinhalt</p>
</div>
<!--endCONTENT-->

<!--openRight-->
<div style="position:relative;left:15px;float:left;width:170px;border:2px solid #0000ff;">
<p>Rightinhalt</p>
</div>
<!--endRIGHT-->

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

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

</BODY>
</HTML>

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

View all threads created 2006-07-20 22:38.