boxenhöhe anpassen

[Sunnyboy]

Hallo

Ich möchte drei gleich lange Boxen, dessen Höhe flexibel ist.

Jede der drei Boxen muss die Höhe individuell nach seinem Inhalt anpassen, und die anderen beiden passen sich der längsten Box an.

Mein bissheriger Code ist:

#inhalt { /*Elternbox*/
  background-color: red;
}
#links { /*1.Kindbox*/
  float: left;
  width: 190px;
  min-height: 150px;
  background-color: #e5e5e5;
  background-image: url(verlauf.jpg);
  background-repeat: repeat-y;
}
#mitte { /*2.Kindbox*/
  float: left;
  width: 530px;
  min-height: 130px;
  background-color: #fff;
  padding:10px 20px 10px 20px;
  font-family: sans-serif;
  font-size:0.95em;
  }
#rechts { /*3.Kindbox*/
  float: left;
  width: 190px;
  min-height: 150px;
  background-color: #e5e5e5;
  background-image: url(verlauf.jpg);
  background-repeat: repeat-y;
}

Ich hoffe ihr könnt mir weiterhelfen und versteht die Frage.
Vielen Dank
LG Sunnyboy

 

[threadi]

Schau dich mal nach Faux Columns um.

 

[Sunnyboy]

Hallo threadi

Ich verstehe wohl Faux Columns nicht ganz, weil einen Container rundherum, und ein y-gekacheltes Bild ist ja bei mir vorhanden (zumindest in die beiden kürzeren Boxen).

Ich hoffe ihr könnt mir ein wenig nachhelfen.
LG Sunnyboy

 

[behalx]

Du könntest dies mit Leichtigkeit implementieren, indem du tables verwendest.

 

[alogheo]

@behalx: Ist aber semantisch nicht korrekt.

@Sunnyboy: Hier sit es ziemlich verständlich beschrieben: http://www.little-coder.de/css/3-spalten-layout-mit-faux-columns/

Wenn es immer noch nicht funtioniert, könntest du nus den Code posten, dann können wir sehen, wo der Fehler liegt.

 

[behalx]

das stimmt allerdings. Ich frage mich nur warum es nicht neben einem table (content) auch eine table (layout) gibt, die sich genau gleich verhält, aber von den Suchmaschinen nicht als table (content) erkannt wird. :-(

 

[threadi]

Die gibt es schon (Stichwort "display: table;"), wird nur vom IE bisher nicht unterstützt.

 

[behalx]

Ja aber <div style="display:table;"><div style="table-row"><div style="display:table-cell"></div></div></div> verhält sich leider völlig anderes (nicht so intuitiv) als das klassische table.

 

[threadi]

Du hast den einen Style falsch angegeben. Eigentlich geht das, im aktuellen FF, Opera und Chrome prima.

 

[behalx]

Welcher style ist falsch angegeben. Das war ja im übrigen nur ein Beispiel... Normalerweise mach ich das mit Klassen.

 

[threadi]

Bei table-row fehlt was.

 

[Sunnyboy]

Ich habe aus meiner Sicht alles richtig.
Das heisst, dass ich selber keinen Fehler finde, aber das ganze noch nicht richtig erscheint.

Ich lade die Seite mal hinauf und gib euch dann den Link.

Bis dann...
Sunnyboy

 

[behalx]

Bei table-row fehlt was.

Muss man dir alles rauskitzeln? Wenn du weißt wie man es richtiger macht, dann sag doch auch wie! Das da "irgendwo etwas fehlt" ist doch keine nützliche Information.

 

[threadi]

Da Du immerhin diesen Code schon selbst verfasst hast, sollte es dir doch selbst auffallen? Das Forum ist ja auch dazu da selbst etwas zu lernen. Dabei wollte ich dir nur helfen ;) Stichwort: display.

 

[behalx]

Mein Gott... ;Jump

 

[threadi]

Danke, aber nein danke ;)

 

[Sunnyboy]

Hallo zusammen

Ich habe nun die Seite im Internet, so dass ihr euch das Problem anschauen könnt.

Also wie gesagt, sollte die Boxenhöhe aller Boxen gleich sein.
Der Link zur Seite.

Vielen Dank im Voraus
Sunnyboy

 

[threadi]

Mach erstmal den HTML-Code valide:
[Invalid] Markup Validation of http://www.osswald.li/05197u87399fnnhix8935uj8fhufx8zih/ - W3C Markup Validator

Bei dieser Art Darstellung würde ich für den rot hinterlegten Bereich ein Hintergrundbild verwenden. Damit umgehst Du all diese Box-Probleme.

 

[Sunnyboy]

Vielen Dank

Ich lerne gern, und möchte doch noch gerne wissen, was ich machen müsste, damit ich auch ohne das ganze Hintergrundbild auskähme.

LG Sunnyboy

 

[threadi]

Damit würdest Du dich vlt. tagelang beschäftigen und zu keinem Ergebnis kommen. Manche Designs erfordern es eben, dass man auch mal einen einfachen Weg geht und die vielfältigen Möglichkeiten von CSS nutzt statt den HTML-Code aufzublähen.