Anker mittig unten positionieren (responsive design) ?

[Quabbe]

Moin,

irgendwie habe ich gerade ein Brett vorm Kopf. Kann mir einer sagen, wie ich die beiden "Mehr erfahren"-Links in ihren jeweiligen Sections so positioniere, dass sie jeweils am unteren Rand des sie umgebenden Containers erscheinen? Dabei soll das ganze so responsive wie möglich bleiben. Bei fixer Höhe wäre das alles ja kein Problem. Aktuell sieht es so aus wie im Screenshot:


Wenn ich dem Container position:relative mitgebe und den Ankern position:absolute und bottom:0, dann scheinen margin:0 auto und Co nicht mehr zu greifen. Kann mir jemand weiterhelfen?

Gruß,
Quabbe

 

[Tronjer]

Verzichte auf position und gib dem linken Anker ein margin-top.

 

[Quabbe]

Dann ist der Anker aber nicht unabhängig vom Inhalt am unteren Rand positioniert. Wenn sich die Width ändert, brechen auch die Zeilen um. Siehe hier:

 

[Tronjer]

Du könntest dem Container oberhalb des Ankers eine fixe height geben. Aber wenn du wirklich eine responsive Seite haben willst, dann nimm lieber gleich ein grid-basiertes Framework wie Bootstrap oder Fondation.

 

[Quabbe]

Auf die fixe height für die Section wirds wohl hinauslaufen, wenn es keine andere Lösung gibt. Auf ein Framework möchte ich bei meiner ersten responsive website gerne verzichten. Bis auf dieses kleine Detail läuft ja alles einwandfrei.