[JK]

Hallo,
Ich möchte ein Tabellenlayout durch ein CSS-Layout ersetzten.
Jetzt habe ich das Problem, dass ich etwa folgende Tabelle hatte:

          +---+--------+---+
1.Zeile   |IMG|  IMG   |IMG|
          +---+--------+---+
          |   | Inhalt |   |
2.Zeile   |IMG| Inhalt |IMG|
          |   | Inhalt |   |
          +---+--------+---+
3.Zeile   |IMG|  IMG   |IMG|
          +---+--------+---+

Die 1. und 3. Zeile habe ich ohne Probleme mit css hinbekommen, aber bei mittleren habe ich das Problem, dass der Inhalt die höhe bestimmt.
Bis jetzt habe ich folgenden Code für die Mitte.
HTML

<div class="mitte">
   <div class="links"></div>
   <div class="inhalt">
      Inhalt

      Inhalt

      Inhalt
   </div>
</div>

CSS:

.mitte{
	background-position: right;
	background-repeat: repeat-y;
	background-image: url(images/rand_rechts.gif);
	width: 100%;
	height: 100px;
}
.links{
	background-image: url(images/rand_links.gif);
	width: 6px;
	height: 100%;
	float: left;
}
.inhalt{
	float: left;
}

Wenn ich bei .mitte nicht eine Höhe festlege und die automatisch vom Inhalt festlegen lasse kann ich für den linken Rand (.links) die höhe nicht auf 100% setzten.
Dieses Verhalten ist so, wie es vom W3C festgelegt ist.
Kennt jemand einen Workaround dafür? Beim Googlen bin ich nur auf wege gestoßen über die Ganze seite 100% Höhe zu erreichen.

Gruß, Jan

[Lloyd Larkin]

Möchtest du damit erreichen, dass die 3. Zeile immer unten steht, oder dass Spalte 1 und 3 in Zeile 2 immer gleich lang sind?

[kadees]

ohne probiert, nur ausm bauch raus:


html:

<div class="mitte">
   <div class="links">
     <div class="inhalt">
        Inhalt

        Inhalt

        Inhalt
     </div> 
   </div>  
</div>

css:

.mitte{
   background-position: right;
   background-repeat: repeat-y;
   background-image: url(images/rand_rechts.gif);
   width: 100%;
   height: 100px;
}
.links{
   background-image: url(images/rand_links.gif);
   width: 6px;
   float: left;
}
.inhalt{
   float: left;
   padding-left: 10px;  /* linker abstand */
}

[JK]

kadees hat mich auf die idee gebracht, die divs einfach zu verschachteln.
Diese Lösung finde ich nun deutlich eleganter als z.B. http://www.alistapart.com/articles/customcorners2 wo mit sehr großen, flächigen bildern gearbeitet wird, die sich über die boxen ausstrecken.

<div class="ma">
  <div class="mb">
    Inhalt

    Inhalt

    Inhalt
  </div>
</div>

.ma{
	background: #435578 url(images/fenster_mr.gif) repeat-y right;
}
.mb{
	background: url(images/fenster_ml.gif) repeat-y;
	padding: 0px 10px;
}