make ul/li stretch 100% of containing div height

[seany123]

Hello, im new to css and i need a little help creating a navigation bar which is horizontal, i want it to fill its containing divs height.

 

here is the simple html

            <div id="nav-bar">
                <ul>    
                    <li>item 1</li>
                    <li>item 2</li>
                    <li>item 3</li>
                    <li>item 4</li>
                </ul>
            </div>

here is the css being used

#nav-bar {
    background-color: #494c51;
    width: auto;
    position: relative;
    height: 44px;
    border-style: solid;
    <!-- background-color: #242528; This is the color of the hover -->
    border-color: #000;
    border-width: thin;
}

#nav-bar ul, li {
    padding: 0;
    list-style-type: none;
    display: inline; 
    line-height: 44px; <!-- this aligns the ul/li into the middle virtically -->
    height: 44px;
    border-bottom-color: red;
    border-style: solid;
}

so #nav bar has a height of 44px which is working, so i assumed i could set height of #nav-bar ul, li to 100% and it would work, but it doesnt, i have also tried putting these values in a new div but that didnt work either.

 

can anyone help me with this?

 

thanks 

[cyberRobot]

The following will apply the styles to the <ul> tag in the "nav-bar" <div>...and to every <li> tag on your page:

#nav-bar ul, li {

Instead, I recommend splitting the styles. You could try something like this:

#nav-bar ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
 
#nav-bar li {
    display:inline-block;
    line-height: 44px;
    height: 37px;
    border: 4px solid #000000;
    border-bottom-color: red;
}

Hopefully the above also answers your question. 

 

 

Also note that CSS comments are different than the ones in HTML. More information can be found here:

http://css-tricks.com/snippets/css/comments-in-css/