CSS-Layout

[Max]

Hallo,

ich verzweifel gerade an einem CSS-Layout vielleicht kann mir ja jemand helfen.
Folgendermaßen soll es aussehen:

Überschrift
-----------Abtrennung-----------
|------------||---------------|
|            ||               |
|            ||               |
|            ||  Box2         |
|    Box1    ||               |
|            ||               |
|            ||---------------|

-----------Abtrennung-----------

als Quelltext dachte ich an:
<div id="header">
 <h1>Überschrift</h1>
 <hr>
</div>
<div id="box1"></div>
<div id="box2"></div>
<div id="footer">
 <hr>
 <p>Copyrighthinweis</p>
</div>

Das Problem ist, dass mal box1 und mal box2 "länger" sein kann, der Footer sich aber immer nach dem längeren ausrichten soll und das kriege ich irgendwie nicht hin. Mal hängt er am kürzeren, mal ist er nicht so breit wie der Bildschirm.

• muss ich die <div>s noch irgendwie verschachteln?
• wie muss ich den footer ausrichten "relative oder absolute und woran?

Danke,
Max

[D.R.]

Hallo,

Das Problem ist, dass mal box1 und mal box2 "länger" sein kann, der Footer sich aber immer nach dem längeren ausrichten soll und das kriege ich irgendwie nicht hin. Mal hängt er am kürzeren, mal ist er nicht so breit wie der Bildschirm.

Du suchst http://de.selfhtml.org/css/eigenschaften/positionierung.htm#clear@title=clear.

mfg. Daniel

[Ingo Turski]

Hi,

als Quelltext dachte ich an:
<div id="header">
<h1>Überschrift</h1>
<hr>
</div>
<div id="box1"></div>
<div id="box2"></div>
<div id="footer">
<hr>
<p>Copyrighthinweis</p>
</div>

warum so überflüssiges Markup?

<h1>Überschrift</h1>  
<div id="box1"></div>  
<div id="box2"></div>  
<p id="footer">Copyrighthinweis</p>

reicht völlig.

freundliche Grüße
Ingo

[Auge]

Hallo

Folgendermaßen soll es aussehen:

Überschrift
-----------Abtrennung-----------
|------------||---------------|
|            ||               |
|            ||               |
|            ||  Box2         |
|    Box1    ||               |
|            ||               |
|            ||---------------|

-----------Abtrennung-----------

Das Problem ist, dass mal box1 und mal box2 "länger" sein kann, der Footer sich aber immer nach dem längeren ausrichten soll und das kriege ich irgendwie nicht hin. Mal hängt er am kürzeren, mal ist er nicht so breit wie der Bildschirm.

Dann lies mal http://de.selfhtml.org/css/layouts/mehrspaltige.htm, darin besonders http://de.selfhtml.org/css/layouts/mehrspaltige.htm#kopf_fuss.

• muss ich die <div>s noch irgendwie verschachteln?

Nein. Dass du ein paar deiner Elemente nicht einmal zwingend brauchst, hat dir Ingo schon mitgeteilt.

• wie muss ich den footer ausrichten "relative oder absolute und woran?

Mit float:left|right; für die Inhalts-<div>s und clear für den Footer geht es noch flexibler, wie dir auch der oben verlinkte Artikel vermittelt.

SELFHTML: float
SELFHTML: clear

Tschö, Auge

[Max]

Danke, das werde ich mir durchlesen. Ich habe mittlerweile ein Bild, dass ich in der Box 1 habe als "Störer" ausfindig gemacht, bei einem "Height" Auto für die Box wird die nämlich mit dem Bild nicht mittskaliert, nur mit Text :( und dementsprechend hängt dann natürlich auch der Footer in der Luft.

Max