3

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/

I should add that I am using Twitter Bootstrap framework so in my case logo and links container are both columns which Bootstrap applies float:left to it. Since I need this to be responsive, using absolute positioning may not be feasible for me.

  • Is this not what you want? http://stackoverflow.com/questions/585945/how-to-align-content-of-a-div-to-the-bottom-with-css – Daniel Williams Aug 08 '13 at 18:25
  • I tried that already and didn't seem to work for me... –  Aug 08 '13 at 18:29
  • So, in Twitter Bootstrap, .wrapper is a row and .logo and .links are columns (floated blocks)? – Marc Audet Aug 08 '13 at 18:57
  • @Marc Audet - exactly! –  Aug 08 '13 at 18:59
  • If the links and the logo are in separate columns, you won't be able to align the bottoms because the floated blocks/columns do not know which one is taller and hence how to adjust the height. The only hope is to combine the two columns in the row into a single column and then apply the solution I posted earlier. – Marc Audet Aug 08 '13 at 19:04

3 Answers3

2

To align the .links element vertically to bottom, it should removes from document normal flow. Add a position: relative to the .wrapper and position: absolute to the .links.

There's no need to float the .logo element; but if it is needed. add overflow: hidden; css declaration to its parent. in this case .wrapper.

Also, you can set margin-right to .logo element to display it correctly near the .links

CSS:

.wrapper {
    width:100%;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    background-color: gold;
    position: relative;
}

.logo {
    font-size:100px;
    margin-right: 25%;
}

.links {
    width:25%;
    background-color: orange;
    position: absolute;
    bottom: 0;
    right: 0;
}

JSFiddle Demo

Hashem Qolami
  • 88,138
  • 25
  • 132
  • 151
  • I understand that this works however I am afraid to use position absolute as I need this to be responsive so when the viewport gets smaller the links container needs to stack below...But if it is position absolute, it won't...Unless I specifically change it with media query...Do you know of any other way other than absolute? –  Aug 08 '13 at 18:39
  • @Rick Is **[this](http://jsbin.com/iqegex/1)** what you need? This is the TW Bootstrap version. – Hashem Qolami Aug 08 '13 at 19:28
1

Using inline-blocks and vertical-align property

Here is an alternative to using absolute positioning:

.wrapper {
    width:100%;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    outline: 1px solid blue; /* for demo only*/
}
.logo {
    width:74%; /* allow 1% for any white space between logo and links */
    font-size:100px;
    outline: 1px solid blue; /* for demo only*/
    display: inline-block;
    vertical-align: bottom;
}
.links {
    width:25%;
    position:relative;
    outline: 1px solid blue; /* for demo only*/
    display: inline-block;
}

Demo fiddle: http://jsfiddle.net/audetwebdesign/YbqUz/

Inline blocks are fairly well supported so this may be a viable option.

Depending on how you want the layout to respond to smaller screen widths, you may want to set a minimum width for the links block.

Marc Audet
  • 42,628
  • 10
  • 57
  • 78
  • I feel like I did a bad job on my description...I should have added that I am using Twitter Bootstrap and their column system uses floats which will automatically make a container a block level element. So in my case logo and links container are both columns. –  Aug 08 '13 at 18:52
  • Are the logo and the links in the same column? – Marc Audet Aug 08 '13 at 18:53
  • No, they are separate just like in the html provided. The wrapper is the row, logo is left column and links is right column. –  Aug 08 '13 at 18:58
  • Thanks! I will use this as it is the closest possible solution...I would have to override what Bootstrap is applying... –  Aug 08 '13 at 19:21
0

Try placing .links inside .logo and use a combination of relative and absolute positioning.

Fiddle Here

Using the following styles for .links will place the div at the bottom of the .logo div while filling the remainder 25% of the screen width.

.links { 
 width:30%;
 float:left;
 position:absolute; 
 font-size: 14px;
 right: -30%; 
 bottom: 0;
}
Trent Johnson
  • 172
  • 5
  • But how would this work in terms of responsiveness? I am using twitter bootstrap to have the columns set... –  Aug 08 '13 at 18:34