Button am Ende von DIV

E

elPlantador

Mitglied
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!
 
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
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>
 
Zuletzt bearbeitet:
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.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück