CSS: Make all <li> width from a list the same and take up 100% of available space

Question

I am trying to make the horizontal navigation menu take up all available width from parent element.

I have tried using the display:table and display:table-cell but that did not work.

Other methods such as using overflow and width:auto doesn't work either.

---

The list is created by Joomla through a menu module.

html

<div id="DivN">
  <jdoc:include type="modules" name="position-1" />
</div>

html (When viewing on browser)

<div id="DivN">
  <ul class="nav menu nav-pills">

    <li class="item-101 current active">
      <a href="/site/">Home</a>
    </li>

    <li class="item-113">
      <a href="/site/index.php?Itemid=113">School Info</a>
    </li>

    <li class="item-114">
      <a href="/site/index.php?Itemid=114">Achievements</a>
    </li>

    <li class="item-115">
      <a href="/site/index.php?Itemid=115">News &amp; Events</a>
    </li>

    <li class="item-116">
      <a href="/site/index.php?Itemid=116">Parents &amp; Carers</a>
    </li>

    <li class="item-117">
      <a href="/site/index.php?Itemid=117">Community</a>
    </li>

    <li class="item-118">
      <a href="/site/index.php?Itemid=118">Contact Us</a>
    </li>

  </ul>
</div> 

css

#DivN{
    width:100%;
    height:42px;
    border-top:1px solid black;
    border-bottom:1px solid black;
    text-decoration:none;
    background-color:black;
    text-align:center;
    font-size:13px;
    font-weight:700;
}

#DivN ul{
    list-style:none;
    width:100%;
}

#DivN ul li{
    display:inline-block;
    /*float:left;*/
    line-height:22px;
    height:32px;
    list-style-type:none;
    margin:4px;
    overflow:hidden;
    width:auto;
}

I have already tried numerous ways for the past few days... Yet none of what is found on the internet works.

I do not know what the classes added by Joomla do, nor do I know where they are.

The navigation bar looks like this: https://www.dropbox.com/s/5sw94euzbsgwvrc/Capture.PNG When mouse is over a button: https://www.dropbox.com/s/lv73war905ii0rh/2.PNG

How can I get it so the list will take up all available space while they are the same size?

Solution 1

If equal width among the items is important to you, you can float the items to the left and give them a set equal width (this works when you know how many items you have. Alternatively, you can use js to determine the width if you have a variable number of menu items):

#DivN{
    width:100%;
    height:42px;
    border-top:1px solid black;
    border-bottom:1px solid black;
    text-decoration:none;
    background-color:black;
    text-align:center;
    font-size:13px;
    font-weight:700;
}

#DivN ul{
    list-style:none;
    width:100%;
    height: 100%;
    padding: 0;
    margin: 0;
}

#DivN ul li{
    float:left;
    line-height:37px;
    height:100%;
    list-style-type:none;
    margin:0;
    overflow:hidden;
    width: 14.28571428571429%;
    cursor: pointer;
}
#DivN ul li:hover{
    background-color: gray;
}

/**
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    contenteditable attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that are clearfixed.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
#DivN ul:before,
#DivN ul:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

#DivN ul:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
#DivN ul {
    *zoom: 1;
}

Here is a fiddle: http://jsfiddle.net/kZb9C/

Updated to make the cf (clearfix) target your element: http://jsfiddle.net/4LUQe/16/

If you want to use the display: table approach, just remember to use display: table-cell on the <li> elements. Also, use vertical-align: middle if you want to vertically center them. (Note that table and table-cell CSS properties do not work in IE7 and below).

Here's a fiddle with the second approach (table): http://jsfiddle.net/kZb9C/1/

Solution 2

I think You should try to use

display: table

once again (for the nav element) and display: table-row for the ul, and display: table-cell for the li.

If You have any problems, please write, but this method SHOULD work. Don't be afraid of display: table, it isn't an old table element, but really a great trick to make good layout with validate and semantic HTML. Hope it helps

UPDATE The same working solution: CSS dynamic horizontal navigation menu to fill up specific width (table behavior)

Comments

[Lodder]

Just on a side note, this won't work in IE7 (not that anyone should care) :)

[KiraNakari]

Tanks for the answer. However I have already tried this as said in the question. The width of the container is set to 960px.

[Jacek Kowalewski]

I have updated my post with the link. Sorry about IE7. Somewhere I saw a script that makes it run on IE7 :). But we shouldn't care ;). jsbin.com/urisa4

[KiraNakari]

Thank you for the detailed answer. But how would I add the cf class to the <ul> tag? The list is put in by Joomla, so I don't know any ways to preset classes for elements not yet in the html.

[Zubzob]

you can modify the cf class to target the specified element. See my updated answer

[KiraNakari]

Thank you! I will fully read the code to understand it later (very busy). It did just what I wanted it to and looks great. Thank you very much.

[Zubzob]

You're welcome. You can read more about clearfix here: webtoolkit.info/css-clearfix.html#.UrQ09PQW0j4