# CSS Layout mit position absolute und relativ möglich?



## dirk80 (2. September 2007)

Hallo!

Ich bin dabei ein Template zu erstellen. Es soll mit einer Ausnahme wie das angehängte Bild aussehen. Dabei habe ich Box1-5 mit position: absolute definiert. Box5 orientiert sich jedoch anders als Box 1-4 am Boden, da Box 3 immer verschiedene Höhen haben kann.

Jedoch will ich Box 5 abhängig von der Höhe von Box3 direkt darunter anzeigen lassen. Im Moment kann es dazu kommen, dass Box5 Box überlappt. Dass soll jedoch nicht passieren. Hat jemand einen Vorschlag wie ich das machen könnte

Vielen Dank schon mal.

Dirk


----------



## Matonor (2. September 2007)

du könntest:
1. min-height von html und body auf 100% setzen (im IE 6 height auf 100%)
box5 dann absolut innerhalb von body am unteren rand per bottom:0 positionieren und box3 margin-bottom mit dem wert der höhe von box5 geben.
oder
2. box5 als kind von box3 definieren und per bottom: 0 an den unteren rand setzen.


----------



## dirk80 (4. September 2007)

Danke für die Antwort
zu 1) hat bei mir nicht geklappt. sobald box3 soviel Text enthält, dass das Fenster gescrollt werden müsste, befindet sich box 5 nicht mehr am unteren Rand.

zu 2) hat geklappt.


----------



## dirk80 (8. September 2007)

Wie funktioniert denn Vorschlag 1?

Ich muss den 1. Vorschlag umsetzen, da Box2 und Box4 länger als Box3 sein könnten und in dem Fall Box5 nicht am Ende der Seite sich befinden würde.


----------



## Maik (8. September 2007)

Hi,

vielleicht hilft dir da dieses alternative Modell weiter?


```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta name="author" content="Maik">
<title>tutorials.de | demo_dirk80</title>

<style type="text/css">
<!--
* {
margin:0;
padding:0;
}

html,body {
height:100%;
}

#wrapper {
position:relative;
min-height:100%;
height:auto !important;
height:100%;
}

#box1 {
background:#cfcfcf;
height:150px;
}

#box2 {
float:left;
width:150px;
background:#ff0000;
}

#box3 {
margin:0 150px;
border:1px solid #000;
}

#box4 {
float:right;
width:150px;
background:#ff0000;
}

#box2,#box3,#box4 {
padding-bottom:30px;
}

#box5 {
clear:both;
position:absolute;
width:100%;
bottom:0;
background:#00e0ff;
}

.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
-->
</style>

</head>
<body>

<div id="wrapper" class="clearfix">
     <div id="box1">
          <p>box1</p>
     </div>
     <div id="box2">
          <p>box2</p>
     </div>
     <div id="box4">
          <p>box4</p>
     </div>
     <div id="box3">
          <p>box3</p>
     </div>
     <div id="box5">
          <p>box5</p>
     </div>
</div>

</body>
</html>
```


----------



## dirk80 (8. September 2007)

Hi!

Irgendwas habe ich noch falsch gemacht. Woran kann es liegen, dass Box4 (wie im angehängten Bild) nicht richtig obenrechts floatet?


```
body, html {
    padding:0;
    margin:0;
    height:100%;
}
#rahmen {
    position:relative;
    min-height:100%;
    height:auto !important;
    height:100%;
    width: 800px;
}
#topbereich {
    background-image: url(../images/index_top.jpg);
    text-align: right;
    padding: 0px;
    margin: 0px;
    height: 350px;
    width: 100%;
}
#left {
    float: left;
    vertical-align:top;
    width: 200px;
    background-color: #ff0000;
}
#content {
    border: 1px solid #000;
    margin: 0 200px;
}
#right {
    float: right;
    width: 200px;
	background-color: #ff3344;
}
#left, #content, #right {
    padding-bottom: 31px;
}
#footer {
    clear: both;
    position: absolute;
    bottom: 0px;
    width:800px;
    text-align: right;
    background-color: #00ffff;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
h1 {
    margin:0;
    font-size: 16px;
}
```


----------



## Maik (8. September 2007)

Notier die drei "Spalten"-DIVs in dieser Reihenfolge:


```
<div id="left">...</div>
<div id="right">...</div>
<div id="content">...</div>
```
In meinem Beispiel lautet das Markup:


```
<div id="box2">...</div><!-- linke Spalte -->
<div id="box4">...</div><!-- rechte Spalte -->
<div id="box3">...</div><!-- mittlere Spalte -->
```


----------

