CODEWITHSUNDEEP
csshtml
stark
stark

Reputation: 2256

making div height same as its contents

I am trying to make a navigation bar with the following code , but i can't seem to get the outer div to be of the same height as that of the unordered list inside.

I tried display:inline-block too but it doesn't seem to work.

Here is the html,

http://jsfiddle.net/jairajdesai/7Lyss/

HTML : 

<div id="top_navigation_menu">
    <ul id="top_navigation_list">
        <li class="top_navigation_options">Home</li>
        <li class="top_navigation_options">Places</li>
        <li class="top_navigation_options">Travel</li>
        <li class="top_navigation_options">Stay</li>
        <li class="top_navigation_options">FAQs</li>
    </ul>
</div>

CSS :

#top_navigation_menu{
position:absolute;
top:14%;
min-width: 50%;
background-color:#eee;
color:white;
}
#top_navigation_list{
list-style-type: none;
}
.top_navigation_options{
display:inline;
}

Upvotes: 0

Views: 220

Answers (2)

mutil
mutil

Reputation: 3305

Just add margin: 0 in #top_navigation_list to remove the default margin of an unordered list.

Updated JsFiddle

Upvotes: 1

Sachin
Sachin

Reputation: 40970

Use display:inline with Ul and display:inline-block with li css class. Something like this

#top_navigation_list{
list-style-type: none;
background-color:#000;
display:inline;
}
.top_navigation_options{
   display:inline-block;
}

JS Fiddle Demo

Upvotes: 2

Related Questions