---
title: "DIV-Layout - drei horizontale Ebenen: [150px] [*] [150px]"
url: "https://www.typo3.net/d/53257-div-layout-drei-horizontale-ebenen-150px-150px"
source: "typo3.net"
tags: ["Frontend","Styling","Frage","HTML & CSS"]
created: "2006-11-12"
last_reply: "2006-12-28"
replies: 7
solved: false
page: 1
pages: 1
lang: "de"
---

# DIV-Layout - drei horizontale Ebenen: [150px] [*] [150px]

Frontend › Styling · 7 Antworten · gestartet 2006-11-12

## Eröffnungsbeitrag

**automatix** · 2006-11-12 · [Beitrag #1](https://www.typo3.net/d/53257-div-layout-drei-horizontale-ebenen-150px-150px/1)

Hallo allerseits!

Wieder mal große kleine Probleme mit CSS...

Also, die Seite muss in drei horizontale (!) Bereiche unterteilt werden:

---------- 150px ----------
------------- * -------------
---------- 100px ----------

Und ich habe keine Vorstellung, wie ich das realisieren soll... Kann denn mir jemend helfen?

Danke![/img]

## Antworten

### [#2](https://www.typo3.net/d/53257-div-layout-drei-horizontale-ebenen-150px-150px/2) · toyde · 2006-11-12

a) Was soll "---*---" darstellen? Eine dynamische Breite?
b) Was hat das mit TYPO3 zu tun  #paralyzed# ?

Evtl. ist man mit Google über Stichworte wie "css spalten" "css div layouts" etc. etwas besser versorgt.

grüsse

### [#3](https://www.typo3.net/d/53257-div-layout-drei-horizontale-ebenen-150px-150px/3) · automatix · 2006-11-13

> **toyde schrieb:**
>
> a) Was soll "---*---" darstellen? Eine dynamische Breite?
> b) Was hat das mit TYPO3 zu tun  #paralyzed# ?
>
> Evtl. ist man mit Google über Stichworte wie "css spalten" "css div layouts" etc. etwas besser versorgt.
>
> grüsse

a) ja, dynamische Breite
b) [Barrierefreiheit: Fragen zu CSS, XHTML, Barrierefreiheit](http://www.typo3.net/forum/?action=list_cat&cid=6)
c) Zum Thema zwei-/drei-/mehrspaltiges Design gibt's millionen von Tutorials und Beispielen. Es geht hier aber nicht um Spalten, sondern darum, wie man eine Seite in mehrere über-(und nicht neben-)einander liegende Bereiche aufteilt.

### [#4](https://www.typo3.net/d/53257-div-layout-drei-horizontale-ebenen-150px-150px/4) · toyde · 2006-11-13

> **automatix schrieb:**
>
> Also, die Seite muss in drei horizontale (!) Bereiche unterteilt werden:

Drei horizontale Bereiche. Sprich links, mitte, rechts. Davon möchtest Du den mittleren dynamisch breit, oder?

> **automatix schrieb:**
>
> Es geht hier aber nicht um Spalten, sondern darum, wie man eine Seite in mehrere über-(und nicht neben-)einander liegende Bereiche aufteilt.

Es geht nun also doch nicht um Spalten. Kannst Du einen Screenshot posten oder erklären um was es überhaupt geht?
Übereinanderliegende Bereiche bekommt man mit simplen Div's hin.

```html
<div id="container">
   <div>Das steht oben</div>
   <div>Das steht in der Mitte</div>
   <div>Das steht darunter</div>
</div>
```

Falls gar *"Überlappung"* gemeint ist, wird Dir Google immernoch gute Dienste leisten (z.B. mit "css position")  ;) .
Inwiefern hat deine Frage zu Beginn *"muss in drei horizontale Bereiche unterteilt werden"* nun mit TYPO3 zu tun? Gibt's ein Verständnisproblem mit den Spalten im Backend? Ein Screenshot bzw. eine Skizze von der Problematik wär wohl am hilfreichsten.

grüsse

### [#5](https://www.typo3.net/d/53257-div-layout-drei-horizontale-ebenen-150px-150px/5) · automatix · 2006-11-13

Also. Was gemeint wird, ist:

```html
<div id="container">
    <div>Das steht oben</div><!-- fixe Höhe, z.B. 150px -->
    <div>Das steht in der Mitte</div><!-- dynamische Höhe -- der ganze freie Raum zwischen den anderen beiden  -->
    <div>Das steht darunter</div><!-- fixe Höhe, z.B. 100px -->
</div>
```

So ungefähr soll das Ganze aussehen:

[Bild: khanataev.de/…/3LL.gif](http://khanataev.de/external-files/files/forums/3LL.gif)

### [#6](https://www.typo3.net/d/53257-div-layout-drei-horizontale-ebenen-150px-150px/6) · automatix · 2006-11-13

[Das](http://barrierefrei.e-workers.de/workshops/fixed/index.html) wäre vielleicht ein möglicher Ansatz. Aber nicht ganz das, ich suche: bei height:150px für das obere und height:100px für das untere DIV bleibt nicht gerade viel Platz für den Inhalt übrig...

Die Suche geht weiter...

### [#7](https://www.typo3.net/d/53257-div-layout-drei-horizontale-ebenen-150px-150px/7) · automatix · 2006-11-13

Und [das](http://barrierefrei.e-workers.de/workshops/dreiplus/index.html) sieht schon besser aus...

### [#8](https://www.typo3.net/d/53257-div-layout-drei-horizontale-ebenen-150px-150px/8) · automatix · 2006-12-28

Da kommt die Lösung.

100% valid: XHTML 1.0 Strict & CSS 2, 2.1, 3

Getestet auf FF 2.0 und IE 7.0 (übrigens, wie sieht's in anderen Browsern aus?).

**CSS**

```html
*
{
    border:0;
    
    /*
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    */
}
HTML, BODY {
    height:100%;
    width:100%;
}

BODY {
    margin:0px;
    padding:0px;

    width:100%;
    height:100%;
    
    background-color:#FFFFFF;

    color:#646464;
    font-size:12px;
    font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
    
    /*
    overflow-x: hidden;
    overflow-y: scroll;
    scrollbar-face-color: #00aa00;
    scrollbar-highlight-color: #99cc99;
    scrollbar-shadow-color: #99cc99;
    scrollbar-3dlight-color: #00aa00;
    scrollbar-arrow-color: #99cc99;
    scrollbar-track-color: #00aa00;
    scrollbar-darkshadow-color: #00aa00;
    */
}
/*++++++++++++++++++++++++++++++++++++++++++++++++++++
BASIC start
+++++++++++++++++++++++++++++++++++++++++++++++++++*/

#main {
    min-height:100%;
    height:auto !important;
    height:100%;
    
    background-image:url("../../template/template_img/BG_main.gif");
    background-repeat:repeat-x;
    
    border:6px solid #9acd03;
    border-style:double;
    
    text-align:center;
    
    display:block;
    
    position:relative;
    
    margin:0;
}

#container {
    min-height:300px;
    height:auto !important;
    height:100%;
    
    padding:0 0 0 0;
    
    background-color:#ffffff;
    
    display:block;
    
    position:relative;
}

#header {
    height:50px;
    
    border-bottom:2px solid #9acd03;
    
    background-color:#eeee00;
    
    padding:0;
}

#content {
    padding-bottom:20px;
    
    background-color:#cccc00;
}

#footer {
    width:100%;
    height:20px;
    
    border-top:2px solid #9acd03;
    
    background-color:#aaaa00;
    
    margin-left:0;
    
    position:absolute;
    left:0px;
    bottom:0px;
}
/*++++++++++++++++++++++++++++++++++++++++++++++++++++
BASIC stop
+++++++++++++++++++++++++++++++++++++++++++++++++++*/
```

**HTML**

```html
<!--|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 -->
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
    <title>JHA</title>
    <link rel="stylesheet" type="text/css" href="css_abc_main.css" />
    <!--|<link rel="stylesheet" type="text/css" href="css_abc_general.css" />
    <link rel="stylesheet" type="text/css" href="css_abc_intersite.css" />
    <link rel="stylesheet" type="text/css" href="css_abc_typo.css" />
    
    <link rel="stylesheet" type="text/css" href="css_area_header.css" />
    <link rel="stylesheet" type="text/css" href="css_area_footer.css" />
    
    <link rel="stylesheet" type="text/css" href="css_area_menu.css" />
    <link rel="stylesheet" type="text/css" href="css_area_content.css" />
    <link rel="stylesheet" type="text/css" href="css_area_info.css" />
    
    <link rel="stylesheet" type="text/css" href="css_area_lang.css" />
    <link rel="stylesheet" type="text/css" href="css_area_banner.css" />-->
</head>

<body>

<!--|< ###DOCUMENT### beginn >-->

<div id="main">
    <div id="container">
        <div id="header"></div>
        <div id="content">
        
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec nisi odio, dapibus non, fringilla non, adipiscing vel, sapien. Curabitur ac metus. Nam eget justo. Donec consequat sapien quis lorem. Integer lobortis. Maecenas congue mauris vitae nunc. Vestibulum at mauris. Mauris mi. Nam gravida facilisis enim. Donec blandit condimentum eros. Nam blandit ante. Sed eu enim ac mi scelerisque mollis.
Nunc sit amet diam non massa <!--|rutrum congue. Nam sed sapien. Vivamus at neque id lacus lobortis accumsan. Curabitur mauris. Maecenas tristique, erat ut fringilla facilisis, mi risus commodo libero, non mollis libero libero non lorem. Curabitur sem lectus, facilisis quis, aliquet eu, vehicula et, nulla. Nulla luctus. Quisque viverra. Suspendisse malesuada bibendum urna. In id est sit amet augue vehicula ornare. Nunc semper semper purus. In sagittis. Praesent eros lectus, pellentesque eu, cursus eu, laoreet in, sem. In a leo. Cras scelerisque iaculis est. In sem. Pellentesque ultricies, felis non placerat fringilla, justo mauris dignissim quam, at vestibulum lacus urna eu massa. Phasellus hendrerit, metus at consectetuer adipiscing, enim arcu adipiscing velit, et elementum nisi magna non magna. Sed quam augue, rutrum vel, egestas quis, semper vitae, sem.
Cras hendrerit imperdiet massa. Morbi rutrum, dolor sit amet scelerisque lobortis, nisi sem molestie nulla, sit amet tincidunt velit elit nec sapien. Sed tempus pulvinar est. Vivamus egestas porta nibh. Aenean gravida, sapien ac rhoncus consequat, justo tellus mattis elit, in vestibulum lectus augue at diam. Curabitur magna urna, suscipit et, mollis sed, posuere porttitor, lorem. Vestibulum auctor, ligula at mollis hendrerit, neque ante elementum erat, at gravida libero odio vel erat. Nam vitae lectus id justo ultricies imperdiet. Donec id libero quis ante gravida aliquet. Etiam lectus orci, ornare eu, sagittis id, hendrerit eu, justo. Suspendisse non dui. Donec sed tellus. Aliquam blandit augue sit amet ligula. Duis ac diam. Donec vitae tellus sit amet massa malesuada sagittis. Praesent scelerisque.
Nam et ipsum. Nullam nec tortor nec erat convallis fringilla. Maecenas elementum gravida libero. Phasellus congue adipiscing enim. Praesent vel neque. Donec sollicitudin massa vel justo. Duis quam urna, molestie quis, eleifend a, consequat nec, arcu. Praesent et lectus. Etiam nec elit. Fusce id neque a velit ultricies rutrum. Nulla ut orci nec tellus dapibus venenatis. Duis congue nulla non justo.
Proin hendrerit facilisis felis. Proin nisi ligula, consequat et, ultrices ut, sollicitudin ut, quam. Nullam pellentesque gravida eros. Quisque aliquet congue mauris. Nunc vel nisi. Praesent libero tellus, mattis et, facilisis ac, consectetuer a, leo. Pellentesque fermentum diam nec metus. Ut laoreet placerat justo. Nulla eget velit. Ut accumsan nisl ac justo. Maecenas ullamcorper, mauris et fringilla adipiscing, est velit egestas libero, a faucibus ligula urna eu dolor. Donec nisi urna, rhoncus sed, lobortis laoreet, interdum nec, nisi. Nam tristique lacus eget sem.
    
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec nisi odio, dapibus non, fringilla non, adipiscing vel, sapien. Curabitur ac metus. Nam eget justo. Donec consequat sapien quis lorem. Integer lobortis. Maecenas congue mauris vitae nunc. Vestibulum at mauris. Mauris mi. Nam gravida facilisis enim. Donec blandit condimentum eros. Nam blandit ante. Sed eu enim ac mi scelerisque mollis.
Nunc sit amet diam non massa rutrum congue. Nam sed sapien. Vivamus at neque id lacus lobortis accumsan. Curabitur mauris. Maecenas tristique, erat ut fringilla facilisis, mi risus commodo libero, non mollis libero libero non lorem. Curabitur sem lectus, facilisis quis, aliquet eu, vehicula et, nulla. Nulla luctus. Quisque viverra. Suspendisse malesuada bibendum urna. In id est sit amet augue vehicula ornare. Nunc semper semper purus. In sagittis. Praesent eros lectus, pellentesque eu, cursus eu, laoreet in, sem. In a leo. Cras scelerisque iaculis est. In sem. Pellentesque ultricies, felis non placerat fringilla, justo mauris dignissim quam, at vestibulum lacus urna eu massa. Phasellus hendrerit, metus at consectetuer adipiscing, enim arcu adipiscing velit, et elementum nisi magna non magna. Sed quam augue, rutrum vel, egestas quis, semper vitae, sem.
Cras hendrerit imperdiet massa. Morbi rutrum, dolor sit amet scelerisque lobortis, nisi sem molestie nulla, sit amet tincidunt velit elit nec sapien. Sed tempus pulvinar est. Vivamus egestas porta nibh. Aenean gravida, sapien ac rhoncus consequat, justo tellus mattis elit, in vestibulum lectus augue at diam. Curabitur magna urna, suscipit et, mollis sed, posuere porttitor, lorem. Vestibulum auctor, ligula at mollis hendrerit, neque ante elementum erat, at gravida libero odio vel erat. Nam vitae lectus id justo ultricies imperdiet. Donec id libero quis ante gravida aliquet. Etiam lectus orci, ornare eu, sagittis id, hendrerit eu, justo. Suspendisse non dui. Donec sed tellus. Aliquam blandit augue sit amet ligula. Duis ac diam. Donec vitae tellus sit amet massa malesuada sagittis. Praesent scelerisque.
Nam et ipsum. Nullam nec tortor nec erat convallis fringilla. Maecenas elementum gravida libero. Phasellus congue adipiscing enim. Praesent vel neque. Donec sollicitudin massa vel justo. Duis quam urna, molestie quis, eleifend a, consequat nec, arcu. Praesent et lectus. Etiam nec elit. Fusce id neque a velit ultricies rutrum. Nulla ut orci nec tellus dapibus venenatis. Duis congue nulla non justo.
Proin hendrerit facilisis felis. Proin nisi ligula, consequat et, ultrices ut, sollicitudin ut, quam. Nullam pellentesque gravida eros. Quisque aliquet congue mauris. Nunc vel nisi. Praesent libero tellus, mattis et, facilisis ac, consectetuer a, leo. Pellentesque fermentum diam nec metus. Ut laoreet placerat justo. Nulla eget velit. Ut accumsan nisl ac justo. Maecenas ullamcorper, mauris et fringilla adipiscing, est velit egestas libero, a faucibus ligula urna eu dolor. Donec nisi urna, rhoncus sed, lobortis laoreet, interdum nec, nisi. Nam tristique lacus eget sem.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec nisi odio, dapibus non, fringilla non, adipiscing vel, sapien. Curabitur ac metus. Nam eget justo. Donec consequat sapien quis lorem. Integer lobortis. Maecenas congue mauris vitae nunc. Vestibulum at mauris. Mauris mi. Nam gravida facilisis enim. Donec blandit condimentum eros. Nam blandit ante. Sed eu enim ac mi scelerisque mollis.
Nunc sit amet diam non massa rutrum congue. Nam sed sapien. Vivamus at neque id lacus lobortis accumsan. Curabitur mauris. Maecenas tristique, erat ut fringilla facilisis, mi risus commodo libero, non mollis libero libero non lorem. Curabitur sem lectus, facilisis quis, aliquet eu, vehicula et, nulla. Nulla luctus. Quisque viverra. Suspendisse malesuada bibendum urna. In id est sit amet augue vehicula ornare. Nunc semper semper purus. In sagittis. Praesent eros lectus, pellentesque eu, cursus eu, laoreet in, sem. In a leo. Cras scelerisque iaculis est. In sem. Pellentesque ultricies, felis non placerat fringilla, justo mauris dignissim quam, at vestibulum lacus urna eu massa. Phasellus hendrerit, metus at consectetuer adipiscing, enim arcu adipiscing velit, et elementum nisi magna non magna. Sed quam augue, rutrum vel, egestas quis, semper vitae, sem.
Cras hendrerit imperdiet massa. Morbi rutrum, dolor sit amet scelerisque lobortis, nisi sem molestie nulla, sit amet tincidunt velit elit nec sapien. Sed tempus pulvinar est. Vivamus egestas porta nibh. Aenean gravida, sapien ac rhoncus consequat, justo tellus mattis elit, in vestibulum lectus augue at diam. Curabitur magna urna, suscipit et, mollis sed, posuere porttitor, lorem. Vestibulum auctor, ligula at mollis hendrerit, neque ante elementum erat, at gravida libero odio vel erat. Nam vitae lectus id justo ultricies imperdiet. Donec id libero quis ante gravida aliquet. Etiam lectus orci, ornare eu, sagittis id, hendrerit eu, justo. Suspendisse non dui. Donec sed tellus. Aliquam blandit augue sit amet ligula. Duis ac diam. Donec vitae tellus sit amet massa malesuada sagittis. Praesent scelerisque.
Nam et ipsum. Nullam nec tortor nec erat convallis fringilla. Maecenas elementum gravida libero. Phasellus congue adipiscing enim. Praesent vel neque. Donec sollicitudin massa vel justo. Duis quam urna, molestie quis, eleifend a, consequat nec, arcu. Praesent et lectus. Etiam nec elit. Fusce id neque a velit ultricies rutrum. Nulla ut orci nec tellus dapibus venenatis. Duis congue nulla non justo.
Proin hendrerit facilisis felis. Proin nisi ligula, consequat et, ultrices ut, sollicitudin ut, quam. Nullam pellentesque gravida eros. Quisque aliquet congue mauris. Nunc vel nisi. Praesent libero tellus, mattis et, facilisis ac, consectetuer a, leo. Pellentesque fermentum diam nec metus. Ut laoreet placerat justo. Nulla eget velit. Ut accumsan nisl ac justo. Maecenas ullamcorper, mauris et fringilla adipiscing, est velit egestas libero, a faucibus ligula urna eu dolor. Donec nisi urna, rhoncus sed, lobortis laoreet, interdum nec, nisi. Nam tristique lacus eget sem.
        -->
        </div>
    </div>
        <div id="footer"></div>
</div>

<!--|< ###DOCUMENT### end >-->

</body>
</html>
```

Beste Grüße und einen guten Rutsch für alle!

---

Quelle: „DIV-Layout - drei horizontale Ebenen: [150px] [*] [150px]“, typo3.net, https://www.typo3.net/d/53257-div-layout-drei-horizontale-ebenen-150px-150px
Beiträge von Mitgliedern des Forums. Bitte mit Link auf die Diskussion zitieren.