# Button am Ende von DIV



## elPlantador (20. Juni 2012)

Hallo zusammen,

ich habe ein drei Spalten Layout, in denen jeweils verschiedene Container (DIVs) drinnen sind, diese haben eine feste Höhe (px). Der Content der jeweiligen Container (Listenaufzählungen) ist unterschiedlich lang. Am Ende jedes Containers soll ein Button eingebunden werden zum weiterklicken. Nun würde ich es gerne so einrichten, dass die Buttons immer auf derselben Höhe sind, also meinetwegen 10px vom unteren Rand entfernt. Die Buttons fangen jedoch gleich unter den Listenaufzählungen an. Ich möchte nicht für jeden Container explizit das margin-top der Buttons festlegen müssen, sondern gern mit einer Klasse arbeiten. Hat jemand einen Tipp?

Vielen Dank!


----------



## ikosaeder (20. Juni 2012)

Du musst deine Buttons abolute positionieren (position:absolute) und das Elternelement muss relative, fixed oder absolute postioniert sein.
Demoseite:
http://ikosaeder.bplaced.net/demo.html

```
<!DOCTYPE html>
<html>

<head>
<style>
.value {
   position:relative;
   height:400px;
    background-color:#808080;
    width:100px;
    float:left;
}
  .low {
    clear:left;
    display:block;
    position:absolute;
    bottom:10px;
}
</style>    
</head>
<body>
<div class="value">
 Lorem ipsum, das allgemeine Blindtext Blabla.    

    <button class="low" type="button" id="1"
     >Button</button>
   
</div>

<div class="value">
 Lorem ipsum, das allgemeine Blindtext Blabla.   

    <button class="low" type="button" id="2"
     >Button</button>
   
</div>

<div class="value">
 Lorem ipsum, das allgemeine Blindtext Blabla.   

    <button class="low" type="button" id="3"
     >Button</button>
   
</div>
</body>
</html>
```


----------



## elPlantador (20. Juni 2012)

Super! Funktioniert! Nun ist es aber so, dass ich die Größe meines Buttons auf "auto" gestellt hatte. Mit der Änderung ist der Button nun nur so groß wie die Schrift darin ist. Vorhin war er über die ganze Breite des Containers. Stelle ich die Breite auf 100%, ragt er über die rechte Seite hinaus. Meinen relativ positionierten Container habe ich das padding: 0 10px; gegeben.


----------



## ikosaeder (22. Juni 2012)

Nimm doch mal das Padding raus.


----------

