Zwei Container (nebeneinander) in einen Großen, der mitwachsen soll.

Crizzo

Redakteur Pro
Teammitglied
Registriert
Juli 2005
Beiträge
3.354
Hallo,

auf meiner Seite habe ich momentan neben dem Text die Bilder eingerichtet:
http://www.blackhawk-zone.de/spiele/eaw.html

Dabei hab ich sie einfach in den Inhalt rein geschrieben und nach rechts ausgerichtet.

Nun kam mir die Idee, dass ich doch einfach zwei Container in den Inhaltbereich packen könnte, die dann nebeneinander stehen und in dem einen die Bilder (2. Container) und in dem anderen der Text (1. Container) ist.

Dabei soll der "Main-Container" sich weiterhin an die größe der anderen beiden Divs anpassen.

Wie genau stell ich das an?
Da Problem ist jeweils, dass unter den beiden Container noch die Punkte:
#wertung
#fakten
#tablereview
sowie stehen muss: <p class="datum"></p>
Diese aber weder in den 1. noch in 2. Container sollen, aber drunter stehen sollen.
Das hab ich jetzt mit einzelen Containern gemacht.
Nur stellt der FF2.0 es nicht so da, wie ich es gerne hätte. Der Grundcontainer soll nämlich mit wachsen, was er im IE7 auch tut.


CSS: http://www.blackhawk-zone.de/css/main3.css
Betroffene Seite: http://www.blackhawk-zone.de/spiele/eaw2.html
Beispiel Bild: http://www.blackhawk-zone.de/bilder/beispiel.jpg
Diese Dateien gehören alle nicht zu der Version, die der IE7 "beherrscht", sondern zu den Seiten die mometan noch eher unelegant funktionieren.

Wie man hier sieht kann der IE7 meine Versuchsversion:
Mit dem IE7 anschauen: http://www.blackhawk-zone.de/spiele/eaw2.html Da kann man sehen wie es aussehen soll.
Der FF2.0 scheitert da aber leider.

Edit: Ich habs gelöst. So gehts:
http://css-technik.de/css-examples/219_9
http://jassesnee.de/easyclear/index.html
Ich hab dann die einzelnen kleinen "Divs" im "Main Container" "floaten" lassen.
Den "Header" sowie den Footer mitv mit "clear:both" .
Der Main Container bekam folgendes verpasst:
Code:
.mainclear:after {
    content:".";
    display:block;
    height:0px;
    clear:both;
    visibility: hidden;
}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
/* End hide from IE-mac */

und nun gehts.
 
Zuletzt bearbeitet:
Du hast halt vergessen, bei der Nutzung von float ordentlich zu clearen. Der IE macht es generell falsch, indem er es ohne clear macht (was nicht korrekt ist) ;)
 

Ähnliche Themen

Zurück
Oben