Verlängern

[Philipp-]

Liebe Community,

habe mal wieder ein Problem. Habe folgenden Code:

<style type="text/css">
.forumTop {
	background-image:url(wcf/images/ph1.0/forumTop.png);
	background-repeat:no-repeat;
	height:20px;
	width:500px;
	}
	
.content {
	width:500px;
	height:auto !important;
	}
	
.content ul li {
	list-style:none;
	float:left;
	}
	
.content ul {
	padding:0;
	margin:0;
	}
	
.forumLeft {
	background-image:url(wcf/images/ph1.0/forumLeft.png);
	background-repeat:repeat-y;	
	width:20px;
	}
	
.forum {
	width:460px;
	height:auto !important;
	}
	
.forumRight {
	background-image:url(wcf/images/ph1.0/forumRight.png);
	background-repeat:repeat-y;	
	width:20px;
	}
	
.forumBottom {
	clear:both;
	background-image:url(wcf/images/ph1.0/forumBottom.png);
	background-repeat:no-repeat;
	height:20px;
	width:500px;
	}		
</style>
<div style="width:500px;">
 <div class="forumTop">[-] Kategorie Titel</div>
 <div class="content">
  <ul>
   <li class="forumLeft">-</li>
   <li class="forum">Inhalt d. Forums</li>
   <li class="forumRight">-</li>
  </ul>
 </div>
 <div class="forumBottom">Forum Bottom</div>
</div>

Nun will ich dass die Klassen forumLeft, forum, und forumRight immer gleich Groß sind. D.h. ich will, dass wenn sich der Inhalt der Klasse forum vergrößert, also weiter nach unten geht, dass dann die beiden anderen Klassen automatisch die selbe Höhe annehmen.
Könnt ihr mir vllt weiterhelfen?
Wäre wirklich nett.

mfg
Philipp

 

[Maik]

Hi,

mit der Fauxcolumns-Technik ist das kein Problem.

Hierfür werden die Hintergrundbilder der linken und rechten Spalte in einer Grafik (500*1px) vereint (hier "3cols.png" genannt) und diese als Hintergrundbild im DIV .content eingesetzt.

Zusätzlich ist http://positioniseverything.net/easyclearing.html erforderlich, um die Floatumgebung zum Abschluss zu "clearen":

.content {
        width:500px;
        height:auto !important;
        background:url(wcf/images/ph1.0/3cols.png) repeat-y;
        }

.forumLeft, .forumRight {
        width:20px;
        }

.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.clearfix {display: inline-block;}

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

<div class="content clearfix">
  <ul>
   <li class="forumLeft">-</li>
   <li class="forum">Inhalt d. Forums</li>
   <li class="forumRight">-</li>
  </ul>
</div>