ansaurus

Question

Answer 1

+6 A:

You can position an element relatively to its parent as follows:

.top {
    position: relative;
}
.nav_links {
    position: absolute;
    bottom: 0;
}

Bottom is the distance from the parent element (.top in this case).

You also need to remove or reduce the value of the height property for .nav_links element to achieve the effect in the image.

David Caunt 2010-02-21 15:21:42

Hi, I made the changes, now the nav links div is below the logo. Did I miss something?

jriggs 2010-02-21 22:29:22

Ok got it looking close by increasing the nav div left-margin. Can you let me know if you see anything blatantly stupid in what I have?

jriggs 2010-02-21 22:48:21

Answer 2

A:

How about:

div.header-link {
    float: left;
    margin: 0 30px;
    padding-top: 75px;
}

You can refine your margins per item to get them where you want them.

bmoeskau 2010-02-21 15:32:09

Not necessary with relative/absolute positioning, where the element is truly positioned at the bottom, rather than just given the right amount of padding or margin to give distance from the top. If the parent element is to grow, through redesign or content flow, these margins need to be adjusted which is more work to maintain and may be impossible if the size is dynamic.

David Caunt 2010-02-21 15:41:05

That only works so long as the box stays the same height. Positioning is the way to go.

Tom 2010-02-21 15:41:55

Thanks for the "exaplanation" but I don't see how this is a wrong/negative point answer. One thing you did not mention is that with abs positioning you also have to set every single left or right coordinate, which would also have to change if the layout changed. How is that easier to maintain? There are many times when using padding/margins would be the "way to go" -- it depends on the situation. Geez.

bmoeskau 2010-02-21 19:59:06

Please note that I did *not* downvote your post - that's not how Stack Overflow should work, and it's not how I behave. Further, your answer is not wrong, but I believe it is a less maintainable solution. With the navigation container element positioned at bottom left, it will always be pinned to the bottom left of the header, even if the header is made taller or shorter.

David Caunt 2010-02-21 20:45:29

OK, point taken. So someone else down-voted a perfectly reasonable and valid answer (regardless of whether it is the "best" one in their opinion) for no good reason. The way voting and reputation works on this site really irritates me at times.

bmoeskau 2010-02-22 00:24:25

Answer 3

A:

The answer is....:

div.nav-links {
  border:0.2em dotted #990000;
  padding-left:50%;
  padding-top:9%;
}

will also recommend Firebug for this kind of work, took me like 10seconds to solve this puzzle ;p

Daniel T. Magnusson 2010-02-21 15:36:37

ansaurus

tags:

views:

answers:

Align Div To Bottom of Parent Div

related questions