Sympathizer: 3 Spalten-Layout + Rahmen

SELF-Forum

3 Spalten-Layout + Rahmen

Sympathizer
– Informationen zu den Bewertungsregeln

Hallo allerseits,

ich orientiere mich an folgendem Beispiel:
http://www.stichpunkt.de/css/4-box.html

Es geht um ein klassisches 3 Spalten-Layout mit Header und Footer.
Das oben genannte Beispiel klappt wunderbar.
Moechte ich nun jedoch um diese ganzen Elemente noch einen
Extra-Container legen (also ein Art Rahmen) so schaffe ich dies
nicht, ohne dass mein Layout dabei zerschossen wird.
Zum Beispiel ragen dann einzelne Panels (zb der Panel links oder
rechts) ueber den Rahmen.
Wie schaffe ich das, dass sich nichts ueberschneidet?

Ueber das Archiv habe ich auch nichts passenden finden koennen.

Waere ueber jegliche Hilfe dankbar.

Mit freundlichen Gruessen,
Sympathizer

--
"Was ist ist, was nicht ist ist moeglich"
Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. 3 Spalten-Layout + Rahmen

    Sympathizer
    – Informationen zu den Bewertungsregeln

    Hallo ,

    ich habe nun mal folgendes einfaches Beispiel erstellt:

      
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  
<html>  
<head>  
<title>Stichpunkt CSS Experimente: 3-Spalten-Design mit Logoleiste</title>  
<style type="text/css">  


      
#panel_top {  
  height:100px;  
  width:1022px;  
  display:block;  
  border:1px solid red;  
}  
#panel_left {  
  width:180px;  
  float:left;  
  height:100%;  
  border:1px solid red;  
}  
#panel_content{  
  border:1px solid red;  
  float:left;  
  width:670px;  
}  
#panel_right {  
 width:180px;  
  float:left;  
  border:1px solid red;  
}  
#panel_footer {  
 clear:both;  
  height:100px;  
  width:1022px;  
  display:block;  
  border:1px solid red;  
}  


      
</style>  
</head>  
  
<body>  
  
  
  
<DIV id="panel_top">  
 TOP  
</DIV>  
  
<DIV id="panel_left">  
  LEFT  
</DIV>  
  
<DIV id="panel_content">  
  CONTENT CONTENTCONTENTCONTENTCONTENTCONTENTCONTENTCONTENTCONTENTCONTENT<br>  
  CONTENT CONTENTCONTENTCONTENTCONTENTCONTENTCONTENTCONTENTCONTENTCONTENT<br>  
  CONTENT CONTENTCONTENTCONTENTCONTENTCONTENTCONTENTCONTENTCONTENTCONTENT<br>  
  CONTENT CONTENTCONTENTCONTENTCONTENTCONTENTCONTENTCONTENTCONTENTCONTENT<br>  
  CONTENT CONTENTCONTENTCONTENTCONTENTCONTENTCONTENTCONTENTCONTENTCONTENT<br>  
  CONTENT CONTENTCONTENTCONTENTCONTENTCONTENTCONTENTCONTENTCONTENTCONTENT<br>  
  CONTENT CONTENTCONTENTCONTENTCONTENTCONTENTCONTENTCONTENTCONTENTCONTENT<br>  
  CONTENT CONTENTCONTENTCONTENTCONTENTCONTENTCONTENTCONTENTCONTENTCONTENT<br>  
  CONTENT CONTENTCONTENTCONTENTCONTENTCONTENTCONTENTCONTENTCONTENTCONTENT<br>  
  CONTENT CONTENTCONTENTCONTENTCONTENTCONTENTCONTENTCONTENTCONTENTCONTENT<br>  
  CONTENT CONTENTCONTENTCONTENTCONTENTCONTENTCONTENTCONTENTCONTENTCONTENT<br>  
  CONTENT CONTENTCONTENTCONTENTCONTENTCONTENTCONTENTCONTENTCONTENTCONTENT<br>  
  CONTENT CONTENTCONTENTCONTENTCONTENTCONTENTCONTENTCONTENTCONTENTCONTENT<br>  
  CONTENT CONTENTCONTENTCONTENTCONTENTCONTENTCONTENTCONTENTCONTENTCONTENT<br>  
  CONTENT CONTENTCONTENTCONTENTCONTENTCONTENTCONTENTCONTENTCONTENTCONTENT<br>  
  CONTENT CONTENTCONTENTCONTENTCONTENTCONTENTCONTENTCONTENTCONTENTCONTENT<br>  
  CONTENT CONTENTCONTENTCONTENTCONTENTCONTENTCONTENTCONTENTCONTENTCONTENT<br>  
  CONTENT CONTENTCONTENTCONTENTCONTENTCONTENTCONTENTCONTENTCONTENTCONTENT<br>  
  CONTENT CONTENTCONTENTCONTENTCONTENTCONTENTCONTENTCONTENTCONTENTCONTENT<br>  
  CONTENT CONTENTCONTENTCONTENTCONTENTCONTENTCONTENTCONTENTCONTENTCONTENT<br>  
  CONTENT CONTENTCONTENTCONTENTCONTENTCONTENTCONTENTCONTENTCONTENTCONTENT<br>  
  CONTENT CONTENTCONTENTCONTENTCONTENTCONTENTCONTENTCONTENTCONTENTCONTENT<br>  
  CONTENT CONTENTCONTENTCONTENTCONTENTCONTENTCONTENTCONTENTCONTENTCONTENT<br>  
  CONTENT CONTENTCONTENTCONTENTCONTENTCONTENTCONTENTCONTENTCONTENTCONTENT<br>  
</DIV>  
  
<DIV id="panel_right">  
  RIGHT  
</DIV>  
  
<DIV id="panel_footer">  
 FOOTER  
</DIV>  
  
</body>  
</html>

    Nun ist das Problem, dass die linke oder rechte Spalte sich nicht an der Heohe der Contentspalte anpassen.
    Was fuer Moeglichkeiten gibt es dort?

    Danke fuer euere Bemuehungen.

    Mit freundlichen Gruessen,
    Sympathizer

    --
    "Was ist ist, was nicht ist ist moeglich"
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. [SOLVED] 3 Spalten-Layout + Rahmen

      Sympathizer
      – Informationen zu den Bewertungsregeln

      Hallo,

      konnte das Problem nun beheben.

      http://shadow-fox.net/examples/threecolumns.html

      Mit freundlichen Gruessen,
      Sympathizer

      --
      "Was ist ist, was nicht ist ist moeglich"
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln