CSS alle divs Vergrößern

[nierewa]

Hallo,

ich habe ein Layout mit drei divs.

Links Mitte und Rechts (siehe Anhang).
Diese werden von einem div umschlossen, um alles auf der Seite zu zentrieren.

Wenn ich jetzt im Mittel-div viel Inhalt habe,
ändert sich ja die Höhe.

Wie bekomme ich das hin, das der linke und der rechte div die gleiche Höhe haben.

P.S.: ichhabe schon in diesem Tread https://www.computerbase.de/forum/threads/css-einheitliche-layergroesse.432945/ nachgelesen.

Aber das funktioniert bei mir nicht, da zwischen den divs
ein Abstand ist und jeder div einen Ramen bekommt.

 

[MoCore]

Also für gewöhnlich stellt man die Farbe des Containers (eußerster Div) au dieselbe wie die Naviboxen bzw. die Rechte und die Linke Box bei dir.
Eine andere Lösung würde mir jetzt nicht einfallen, vlt. würde was mit JS oder PHP gehen..

LG, Mo

 

[nierewa]

Na ja, die haben ja dieselbe Farbe

Es ist halt bloß ein Rahmen um die jeweiligen Bereiche.

 

[Crizzo]

Gar nicht. Du kannst keine Abhängigkeit unter den nebeneinanderstehenden Containern erzeugen, sondern es nur so einrichten, dass es so aussieht, als würden sie "mitwachsen".

Hier: http://xhtmlforum.de/40267-faq-h-ufig-gestellte-fragen-und.html Punkt 1

 

[PW-toXic]

das was du möchtest ist im prinzip eine Tabelle, da alle 3 Spalten gleich hoch sein sollen.
Diese Eigenschaft haben eigentlich nur Tabellen.

<table> 
     <tr>
         <td> linke spalte</td>
         <td> mittlere spalte</td>
         <td> rechte spalte</td>
    </tr>
</table>

allerdings solltest du in deiner style.css
td {
vertical-align: top;
}

machen

Es gibt zwar diverse Spielereien, wie man so etwas auch mit divs umsetzt, aber das halte ich für stupide rumhackerei.

Ich hoffe ich rufe möglichst viele "Table Layout-Schreier" auf den Platz

 

[MoCore]

Naja mit den Tabellen müsteste deine Seite ziemlich umkrämpeln, ich persöhnlich bin nicht so der Fan von Tables.
Aber wen die BG-Farbe vom Kontainer dieselbe ist wie von den beiden Boxen siehts doch so aus als würden sie mitwachsen :-)
du könntest den boarder bottom und right weglassen und in der Content Box rechts und links einen border einfügen, zudem noch dem Container einen boarder geben. Damit müstest du rumspielen, ich weiß nicht wie das bei dir aussehen würde :-)
Wäre glaub ich das einziege was mir jetzt einfallen würde.

LG, Mo

 

[Crizzo]

das was du möchtest ist im prinzip eine Tabelle, da alle 3 Spalten gleich hoch sein sollen.
Diese Eigenschaft haben eigentlich nur Tabellen.

<table> 
     <tr>
         <td> linke spalte</td>
         <td> mittlere spalte</td>
         <td> rechte spalte</td>
    </tr>
</table>

allerdings solltest du in deiner style.css
td {
vertical-align: top;
}

machen

Es gibt zwar diverse Spielereien, wie man so etwas auch mit divs umsetzt, aber das halte ich für stupide rumhackerei.

Ich hoffe ich rufe möglichst viele "Table Layout-Schreier" auf den Platz

Das ist eine semantische Katastrophe und sollte nicht verwendet werden.

Naja mit den Tabellen müsteste deine Seite ziemlich umkrämpeln, ich persöhnlich bin nicht so der Fan von Tables.
Aber wen die BG-Farbe vom Kontainer dieselbe ist wie von den beiden Boxen siehts doch so aus als würden sie mitwachsen :-)
du könntest den boarder bottom und right weglassen und in der Content Box rechts und links einen border einfügen, zudem noch dem Container einen boarder geben. Damit müstest du rumspielen, ich weiß nicht wie das bei dir aussehen würde :-)
Wäre glaub ich das einziege was mir jetzt einfallen würde.

LG, Mo

So wie ich es verlinkt habe, geht es momentan am besten. Das ist im Grunde die gleiche Idee, die du hier im Ansatz vorschlägst.

 

[MoCore]

So wie ich es verlinkt habe, geht es momentan am besten. Das ist im Grunde die gleiche Idee, die du hier im Ansatz vorschlägst.

Aja :-) hab deinen Link übersehen

 

[PW-toXic]

naja das gleich als semantische Katastrophe darzustellen, nur weil man eine tabelle an einer Stelle benutzt, was sonst nicht ohne hacks möglich ist?
Frägt sich was schlimmer ist.

Mir gefällt das mit den tables auch nicht, aber solange es keine gescheite alternative gibt, kann man das durchaus so machen.

Ich benutze meistens einfach ein relativ breites hintergrundbild und setze da 2 oder 3 divs mit float: left rein, und schon hab ich mein layout so zusammen gebastelt wie ich das haben möchte.

Aber das geht leider nicht immer so einfach.

 

[bassti]

Wie wärs denn, wenn du alle Container mit

position: absolute;
top: 10px;
bottom: 10px;

machtest.
Dann würden Alle divs 10px von unterm Bildrand enden. Damit wäre doch erreicht, was du willst oder?

 

[Crizzo]

naja das gleich als semantische Katastrophe darzustellen, nur weil man eine tabelle an einer Stelle benutzt, was sonst nicht ohne hacks möglich ist?
Frägt sich was schlimmer ist.

Die Tabelle.

Mir gefällt das mit den tables auch nicht, aber solange es keine gescheite alternative gibt, kann man das durchaus so machen.

Und es ist eine Katastrophe. Du würdest auch keine Tabelle benutzen, wenn du etwas ähnliches in Word, mit dem Bleistift auf Papier machen wolltest.
Auch braucht man hier keinen "Hack", denn hier wird kein Fehler in irgendeiner Browser-Engine ausgenutzt, sondern nur etwas vorgetäuscht, was sonst nicht da wäre, nämlich gleich hohe Container.

@bassti:
Hast du das vorher mal ausprobiert? Wahrscheinlich nicht. Denn dann würdest du gesehen haben, dass deine Idee zusammenfällt, sobald man den Elementen mehr Inhalt gibt, als die Sichtbereichhöhe verträgt.

 

[PW-toXic]

also ich halte eine 3 spaltige tabelle mit nur einer zeile durchaus für eine echte Tabelle

Und ja, sowas habe wir früher auch öfter mal in der Schule in Hefteinträge gemacht

Daran ist nichts komisches dran.

und selbst von der semantik kann man darüber streiten ob das eine Katastrophe ist.

Im Endeffekt ist es eine Tabelle mit drei Spalten. Navbar links - inhalt - navbar rechts


Aber naja mir war bewusst, dass ich so eine Diskussion hervorrufe Ist ja das Leidige CSS Diskussion Thema gleich nach IE box model

 

[Crizzo]

also ich halte eine 3 spaltige tabelle mit nur einer zeile durchaus für eine echte Tabelle

Und ja, sowas habe wir früher auch öfter mal in der Schule in Hefteinträge gemacht

Daran ist nichts komisches dran.

und selbst von der semantik kann man darüber streiten ob das eine Katastrophe ist.

Im Endeffekt ist es eine Tabelle mit drei Spalten. Navbar links - inhalt - navbar rechts

Eben nicht. Tabellen vergleichen bzw. stellen gleiche Daten struktoriert dar. (z.B.: Kalender, Periodensystem, Öffnungszeiten usw.) Überall dort kann man natürlich auch im Web eine Tabelle benutzen.

Doch bei "deiner" Verwendung der Tabelle trifft nichts dergleichen ein, sprich: sie ist völlig fehl am Platz.

Semantik heißt ja nur, dass man die HTML-Elemente dem Inhalt entsprechend verwendet, nimmst du jetzt eine Tabelle, ist das nicht dem Inhalt angemessen --> unsemantisch.

Sollte genug "Offtopic" sein. Wen es noch interessiert, dem würde ich diese Links ans Herz legen:
http://www.vorsprungdurchwebstandards.de/theory/retro-coding/
http://seybold.jan-andresen.de/everything.php
http://www.vorsprungdurchwebstandards.de/ein_herz_fuer_tabellen.html

 

[PW-toXic]

Ja ich kenn das ja alles Ich hab mich früher auch mal 100% gegen tables gewehrt, aber mittlerweile bin ich einfach "flexibler" was das angeht, weil css mir nicht das bieten kann was ich manchmal brauche

 

[nierewa]

Ja ich kenn das ja alles Ich hab mich früher auch mal 100% gegen tables gewehrt, aber mittlerweile bin ich einfach "flexibler" was das angeht, weil css mir nicht das bieten kann was ich manchmal brauche

Dem stimme ich zu. Leider habe ich das "designen" mit Tabellen
beigebracht bekommen. Deshalb ist für mich der Umstieg zu divs und css
relativ schwer.

Hier habe ich enorme Probleme durch die unterschiedliche Darstellung in den unterschiedlichen Browser. Dies war mit Tabellen nicht so.

P.S.: Ich habe mein Problem gelöst, in dem ich ein background-image benutze.
Dieses lasse ich einfach wiederholen

 

[Ack der III]

Im Grunde müsste man warten, bis die Browser CSS 3 unterstützen.
Da ist es tatsächlich möglich, ein div-Element in Spalten zu unterteilen.

Dem stimme ich zu. Leider habe ich das "designen" mit Tabellen
beigebracht bekommen. Deshalb ist für mich der Umstieg zu divs und css
relativ schwer.

Hier habe ich enorme Probleme durch die unterschiedliche Darstellung in den unterschiedlichen Browser. Dies war mit Tabellen nicht so.

P.S.: Ich habe mein Problem gelöst, in dem ich ein background-image benutze.
Dieses lasse ich einfach wiederholen

Das IE-Box-Modell kann man ganz einfach ausschalten, indem man dem Browser sagt, das er sich an den Standard halten und nicht den Quirks-Modus(eigene Interpretation des Codes) benutzen soll. So sieht die Webpage auch in allen Browsern (fast) gleich aus.
http://www.css4you.de/wsdoctypeswitch/index.html