How do i place this menu at the bottom right of its parent div?

StackOverflow https://stackoverflow.com/questions/22952463

Question

I've been trying to absolutely position my navigation at the bottom right of its parent div (header>nav>menu) and i'm a little lost. Help would be appreciated!

I've been trying to relatively position its parent div, but each property i try, it either disappears from the browser, aligns all the way at the bottom right of the page and not its parent div, or somewhere else i'm not wanting it to go.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="css/style.css" rel="stylesheet" type="text/css">
<link rel="shortcut icon" href="images/favicon.png" />
</head>

<body>

    <div id="wrapper">

        <header>
            <div class="logo">
                <img src="images/logo.png" / id="logo">
            </div>
            <nav>
                <ul id="menu">
                    <li><a href="index.html">Home</a></li>
                    <li><a href="portfolio.html">Portfolio</a></li>
                    <li><a href="career.html">Career</a></li>
                    <li><a href="contact.html">Contact</a></li>
                </ul>             
            </nav>
        </header>

    </div>

</body>
</html>

body {
    margin:auto;
    width:960px;
}

.logo {
    display:block;
    float:left;
    width:242px;
    height:141px;
    margin:0px;
}



#header {
    position:relative;
    height:100%;
}

#nav .menu {
    position:absolute;
    bottom:0px;
    right:0px;
    margin:0px;
    padding:0px;
    float:right;
}

#menu ul {
    list-style:none;
}

#menu li {
    display:inline;
    float:left;
}

#menu a {
    display:block;
    width:120px;
    font-weight:bold;
    color:#FFFFFF;
    background-color:#98bf21;
    text-align:center;
    padding:4px;
    text-decoration:none;
    text-transform:uppercase;
}

#menu a:hover,a:active
{
background-color:#7A991A;
}
Was it helpful?

Solution 2

You made some mistakes,

  1. you use #header in css but you don't put id header to the <header> tag,
  2. you use #nav in css instead of nav tag because there is no id in nav tag,
  3. #header height is 100%. it will take the height of parent. put height:auto; so that it will take only the height it need to fit its content.

I made a JSFiddle. please check. hope this will solve your problem.

http://jsfiddle.net/banded_krait/Q4Zjj/

OTHER TIPS

you define in your css nav is a tag element not id or menu is a id not class Please change to your css and define as like this

Change to this 

#nav .menu

into this

nav #menu

Demo

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top