CODEWITHSUNDEEP
htmlcss
Elena Vesvina
Elena Vesvina

Reputation: 71

How to place a menu in bottom area?

i have this site:

http://eventos.dac-proiect.ro/

I want to move the menu in the bottom area of container as in the picture below

http://i61.tinypic.com/33w4caq.jpg

This code CSS for the menu:

.main-navigation {
    display: inline-block;
    float: left;
    width: 75%;
}

I tried to do that position:absolute; bottom:0px; but not working.

I found some example here on the site and I managed to implement

Can I get down menu margin-top: X value but no other method?

Can you help me to solve this problem please?

Thanks in advance!

Upvotes: 0

Views: 74

Answers (3)

roshan
roshan

Reputation: 2510

When ever you give position:absolute to an element it is positioned to nearest parent having position or body if no parent is positioned. It is safe to use position:relative on the parent of element you are trying to give position:absolute.

So in the code below I am giving position:relative to the parent of element you are trying to position.So that required element is positioned relative to .site-header.

I hope this helps you in long run.

.site-header{
  position:relative;
 }

#site-navigation{
  position: absolute;
  bottom: 0;
}

Upvotes: 4

marsh
marsh

Reputation: 1441

You can add padding-top, for example

.main-navigation {
    float: left;
    width: 75%;
    padding-top: 70px;
}

inline-block is unnecessary

Upvotes: 1

user1789573
user1789573

Reputation: 535

Simply put your HTML code snippet at the bottom of your HTML document.

Upvotes: -4

Related Questions