Question

I have a div but i dont know how to set the css position attributes. I would like the div (nav) to be placed in the middle of the page. Then i would like to place content in the div so that the border comes around the content. Currently, the div border doesnt border anything and the content that it should border appears below the div.

HTML:

         <div id='nav'>
<a id='ask' class='button' unselectable='on' style='left: 20px;' href='#'>one</a>
<a id='unanswered' class='button' unselectable='on' style='left: 120px;' href='#'>two</a>
<a id='unanswered' class='button' unselectable='on' style='left: 220px;' href='#'>three</a>
<a id='unanswered' class='button' unselectable='on' style='left: 320px;' href='#'>four</a>

CSS:

.button{
 position: absolute;
 top: 50px;
border: 1px solid orange;
cursor: pointer;
padding: 0px 10px 0px 10px;
}

#nav{
position: relative;
margin-right: auto;
margin-left: auto;
margin-bottom: 10px;
border: 1px solid gray;
width: 700px;
}

Answer 1

Since .button is set to position:absolute, the container div (.nav) isn’t counting their height into its own.

Add a clearing div after the links:

<div style="clear:both;"></div>

This should do the trick.

Also, you don’t really need to have your a elements set to position:absolute—here’s my solution:

.button {
    display:inline-block;
    margin-top: 50px;
    margin-right:80px;
    border: 1px solid orange;
    cursor: pointer;
    padding: 0px 10px;
}

#nav {
    position: relative;
    margin: 0 auto;
    border: 1px solid gray;
}

Example.