align nav to bottom of header

Question

My header holds a logo image as well as my nav element. I would like my nav to sit at the bottom of the header, but without using absolute positioning or specific top/left pixels because I would like this to be responsive.

Here is my code so far

http://jsfiddle.net/Aiedail/86ZGd/

I had tried adding like a

 nav{margin-top: 50%;}

but that used the full page height rather than the containing div height.

Any suggestions or help would be appreciated.

score 6 · Accepted Answer · answered Jul 17 '13 at 14:02

6

I do think the best way for you to solve this, is to set your parent container to

position: relative;

and in your nav, use

position: absolute;
bottom: 0;
right: 0;

this way, your nav is always in the rightbottom corner of your header, but your header is still relative, so you don't lose the responsiveness.

JSFiddle Here

answered Jul 17 '13 at 14:02

Jamie De Palmenaer

864
5
14

That worked perfectly. Honestly not sure why that hadn't occurred to me. Probably because I've just been staring at it for to long. – JSturgessMeyers Jul 17 '13 at 16:02

score 0 · Answer 2 · answered Jul 17 '13 at 14:07

Basically, I took your logo and the nav and made them both display: inline-block; Removed the float styles.

Then you can use the vertical-align: bottom; for the nav element.

I forked your jsfiddle here http://jsfiddle.net/tQg8d/1/

img{ 
    @extend .layout;
    padding: 10px;
    width: 30%;
    height: auto;
    max-width: 300px;
    display: inline-block;
}

nav{
    position: relative;
    margin: 0;
    padding: 0;
    width: 69%;
    height: auto;
    border: 5px solid $red;
    bottom: 0px;
    display: inline-block;
    vertical-align: bottom;

I also had to make the width of the nav a little smaller so changed it to 69% so that it shows up to the right of the logo. Might be because of the border.

The border is actually just there so I can see the elements in their whole as I am developing, it will be removed after I finish that section. — JSturgessMeyers, Jul 17 '13 at 16:03

score 0 · Answer 3 · answered Jul 17 '13 at 14:11

0

Hope this is will help, if like to increase header height and and nav width may fine for you

nav { width :100% }

and

header { max-height : 200px; }

answered Jul 17 '13 at 14:11

Josh

1,009
2
13
25

score 0 · Answer 4 · answered Jul 17 '13 at 14:11

I would honestly suggest you follow the position:absolute model that Jamie detailed, but if you want a different way, you can use some negative margins.

For this, though, you need to be able to specify the height of the nav element (use ems, as they work better with responsive designs).

So you would just clear the float after the image--then you can set the top margin to -xxx (whatever the height of the element is).

Here is an example:

http://cdpn.io/bfoyj

Not as pretty as using the absolute positioning, but also works.

align nav to bottom of header

4 Answers4