www.rakx.de

Mich hat einige Zeit ein CSS-Problem beschäftigt, zu dem ich jetzt eine Lösung gefunden habe. Drauf gekommen bin ich leider nicht selbst, sondern ich habe einen CSS Layout Generator bemüht: http://csslayoutgenerator.com/

Das Problem: Ich wollte ein dreispaltiges Layout, bei dem ich die Hintergrundfarben per CSS festlegen kann (nicht als Bild), und das die Spalten vertikal am längsten Inhalt ausrichtet.

Der  Trick, der hier verwendet wird, ist dass die Farben der linken und rechten Spalte als border-color festgelegt werden, die mittlere Spalte als background-color. Innerhalb dieses Divs liegen die drei Spalten, in denen dann der Inhalt platziert wird.

Die Skalierung wird durch ein :after – Element erreicht, das einen Punkt unterhalb der drei Spalten einfügt, aber durch ein visibility: hidden gleich wieder versteckt wird.

Hier ein Beispiel:

HTML

0. <div id="center-it">
1.    <div id="colorizer">
2.  
3.       <div id="container">
4.          <div id="content_normal">
5.             Content: Sed placerat accumsan ligula. Aliquam felis magna, congue quis, tempus eu, aliquam vitae, ante. Cras neque justo, ultrices at, rhoncus a, facilisis eget, nisl. Quisque vitae pede. Nam et augue. Sed a elit. Ut vel massa. Suspendisse nibh pede, ultrices vitae, ultrices nec, mollis non, nibh. In sit amet pede quis leo vulputate hendrerit. Cras laoreet leo et justo auctor condimentum. Integer id enim. Suspendisse egestas, dui ac egestas mollis, libero orci hendrerit lacus, et malesuada lorem neque ac libero. Morbi tempor pulvinar pede. Donec vel elit.
6.          </div><!-- #content-->
7.       </div><!-- #container-->
8.  
9.       <div id="content_links">
10.          Sidebar: Integer velit. Vestibulum nisi nunc, accumsan ut, vehicula sit amet, porta a, mi. Nam nisl tellus, placerat eget, posuere eget, egestas eget, dui. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In elementum urna a eros. Integer iaculis. Maecenas vel elit.
11.       </div><!-- .sidebar.sl -->
12.  
13.       <div id="content_rechts">
14.          Sidebar: Integer velit. Vestibulum nisi nunc, accumsan ut, vehicula sit amet, porta a, mi. Nam nisl tellus, placerat eget, posuere eget, egestas eget, dui. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In elementum urna a eros. Integer iaculis. Maecenas vel elit.
15.       </div><!-- .sidebar.sr -->
16.  
17.    </div><!-- #colorizer-->
18. </div><!-- #center-it -->

CSS

0. #center-it {
1.    width: 864px;
2.    margin: 0 auto;
3. }
4.  
5. /* Middle
6. -----------------------------------------------------------------------------*/
7. #colorizer {
8.    border-left: 288px solid #4D94D6;
9.    border-right: 288px solid #D8E8F5;
10.    background-color: #BFD9F0;
11.    height: 1%;
12. }
13. #colorizer:after {
14.    content: '.';
15.    display: block;
16.    clear: both;
17.    visibility: hidden;
18.    height: 0;
19. }
20. #container {
21.    width: 100%;
22.    float: left;
23.    overflow: hidden;
24.    margin-right: -100%;
25. }
26. #content_normal {
27.    padding: 5px 20px;
28. }
29.  
30. /* Sidebar Left
31. -----------------------------------------------------------------------------*/
32. #content_links {
33.    float: left;
34.    width: 248px; /* width of left column minus padding left and right*/
35.    position: relative;
36.    left: -288px;
37.    padding: 5px 20px;
38. }
39.  
40. /* Sidebar Right
41. -----------------------------------------------------------------------------*/
42. #content_rechts{
43.    float: right;
44.    margin-right: -288px;
45.    width: 248px; /* width of left column minus padding left and right*/
46.    position: relative;
47.    padding: 5px 20px;
48. }

Anschauen kann man sich dieses Beispiel hier.