Thursday, 8 August 2013

CSS vertically align element to the bottom without height of parent

CSS vertically align element to the bottom without height of parent

How can I align element to the bottom of the container without knowing the
height? I want to align the "links" div container to the bottom so it
aligns next to the logo text's bottom. I cannot set a height because users
can change the logo size and it could be an image...
Here is the code:
<div class="wrapper">
<div class="logo">
<a href="#">LOGO HERE</a>
</div>
<div class="links">
<a href="#">LINK 1</a>
<a href="#">LINK 2</a>
<a href="#">LINK 3</a>
</div>
</div>
.wrapper { width:100%;
-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;}
.logo { width:75%;float:left;font-size:100px;}
.links { width:25%;float:left;position:relative;}
http://jsfiddle.net/Lejpr/

No comments:

Post a Comment