dave: 3 spalten + footer

Beitrag lesen

SELF-Forum

3 spalten + footer

dave
– Informationen zu den Bewertungsregeln

Hi,

ich möchte 3 Spalten, 1 Header über alle drei Spalten und ein Footer über alle drei Spalten.

Wie ich das mit den 3 Spalten hinbekomme habe ich schonmal gefragt, allerdings ohne Footer. Und ich denke nicht das mit der Lösung von Gunnar ein Footer möglich ist, da dieser zu weit oben sitzt wenn der Inhaltsbereich zu kurz ist? Zudem möchte ich den Spalten noch eine Hintergrundfarbe geben die so hoch ist wie die Seite (faux columns), das bekomm ich aber auch nicht hin. Der Header ist kein Problem.

Wichtig ist mir dass ich die Reihenfolge im HTML nicht ändern muss:

<body>  
  <h1>example.com</h1>  
  
  <h2>Hauptinhalt</h2>  
  <p>Lorem ipsum dolor sit amet.</p>  
  
  <div id="foo">  
    <h2>linke Spalte</h2>  
    <p>Lorem ipsum dolor sit amet.</p>  
  </div>  
  
  <div id="bar">  
    <h2>rechte Spalte</h2>  
    <p>Lorem ipsum dolor sit amet.</p>  
  </div>  
  
  <footer>footer</footer>  
</body>

Mein derzeitiges CSS:

html  
{  
    position: relative;  
}  
  
body  
{  
    border-left: 200px solid green; /* breite der linken Spalte plus etwas Abstand */  
    border-right: 300px solid lightblue; /* breite der rechten Spalte plus etwas Abstand */  
    padding:10px;  
}  
  
#foo /* linke Spalte */  
{  
    left: 40px;  
    position: absolute;  
    top: 10px;  
    width: 120px;  
}  
  
#bar /* rechte Spalte */  
{  
    position: absolute;  
    right: 40px;  
    top: 10px;  
    width: 220px;  
}  
footer {  
    position:relative;  
    background:orange;  
}

Und hier zum anschauen bzw. rumspielen.

Ich hab das Ganze dann mal etwas umgebaut:

<body>  
  <div class="content">inhaltsbereich mitte</div>  
  <div class="column first">linke spalte<br/><br/>abstand</div>  
  <div class="column second">rechte spalte</div>  
  <header>header oben drüber</header>  
  <footer>footer unten drunter</footer>  
</body>

html {  
    background:grey;  
}  
body {  
    max-width:800px;  
    min-width:600px;  
    margin:100px auto 0;  
    position:relative;  
    padding:0;  
}  
.column {  
    float:left;  
    width:200px;  
    position:relative;  
    margin: 0;  
    padding:10px;  
}  
.column.second {  
    float:right;  
}  
.content {  
    position:absolute;  
    left:0;  
    top:0;  
    right:0;  
    border-right:220px solid lightblue;  
    border-left:220px solid green;  
    min-height:100%;  
    background:white;  
    padding:0 10px;  
}  
header {  
    position:absolute;  
    top:-100px;  
    height:100px;  
    left:0;  
    right:0;  
    background:orange;  
}  
footer {  
    clear:both;  
    position:relative;  
    background:black;  
    color:white;  
    display:block;  
}

anschauen, rumspielen

Hier gehts wenn die Spalten zu hoch werden und meine Faux-Columns-Zeugs wird auch wie gewünscht angezeigt.
Nur jetzt rutscht der Footer selbstverständlich nicht nach unten wenn der Inhaltsbereich höher wird.

Wichtig ist mir die Reihenfolge des HTML-Codes: Inhalt, erste Spalte, zweite Spalte, (Header), Footer.

Hat jemand eine Idee?

~dave

Beitrag melden
–
Informationen zu den Bewertungsregeln