ul 100% of its parent

Question

I want my list width to be 100% of his parent width. Here is my code:

HTML:

<div id="page">
    <ul class="tab" >

        <li class="tab1">
            <a > Overview</a>
        </li>
        <li class="tab12">
            <a > Overview2</a>
        </li>
     </ul></div>

CSS:

body>#page {
    margin: 0 auto;
    width: 980px;
    text-align: left;
    padding-bottom: 20px;

}

I tried with width: 100%; on ul element but it doesnt work. How can i do it?

Answer 1

Try this: the ul's width is 100%, the div's width some 980 pixels.

HTML:

<div id="demo">
    <ul>
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
    </ul>
</div>

CSS:

div#demo {
    width:980px;
}

div#demo ul {
    width:100%;
}

div#demo li {
    display:inline-block;
    width:33%;
}

http://jsfiddle.net/EU65T/

Answer 2

#page ul li {
width: 100%;
}

This will make the list element 100% width of the ul parent. Also the ul is 100%;

Answer 3

The list width itself should already be 100% wide. <li> , <ul> and <div> are all block-level elements already and should by default take up 100% of the width.

But <a> is an inline -level element by default, so width will not apply. You need to make it a block -level element with display:inline-block; and width:100% to have the width be 100% of it's parent's width.

I suspect that you also want to be giving the <li> a width and making them display:inline-block so that they sit next to each other on the same line.