CODEWITHSUNDEEP
csspositioning
kirby
kirby

Reputation: 4041

How to put things in divs with true border

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;
}

Upvotes: 0

Views: 78

Answers (2)

Purag
Purag

Reputation: 17071

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.

Upvotes: 2

Telmo Marques
Telmo Marques

Reputation: 5106

An alternative to Purmou's solution is to specifically set the #nav's div height in the css:

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

Like shown in this fiddle.

Upvotes: 0

Related Questions