Stretch UL to fill the entire DIV

Question

There is a similar post: Stretch horizontal ul to fit width of div

But mine is a little bit tricky, as I have tried the above example but failed.

CSS:

body{
  font-size:0.85em;
  font-family:Verdana, Arial, Helvetica, sans-serif;
}

#nav, #nav ul{
  margin:0;
  padding:0;
  list-style-type:none;
  list-style-position:outside;
  position:relative;
  line-height:1.5em;
  display: table;
  width: 100%;
}

#nav a{
  display:block;
  padding:10px 15px 10px 15px;
  border:1px solid #fff;
  color:#fff;
  text-align: center;
  margin:0;
  text-decoration:none;
  background: #C34328;
  border-top:1px solid #EF593B;
  -moz-box-shadow:0px 3px 4px #591E12 inset;
  -webkit-box-shadow:0px 3px 4px #591E12 inset;
  -box-shadow:0px 3px 4px #591E12 inset;
}

#nav a:hover{
  background-color:#fff;
  color:#333;
}

#nav li{
  float:left;
  position:relative;
}

#nav ul {
  position:absolute;
  display:none;
  width:12em;
  top:3.2em;
}

#nav li ul a{
  width:12em;
  height:auto;
  float:left;
}

#nav ul ul{
  top:auto;
}

#nav li ul ul {
  left:12em;
  margin:0px 0 0 10px;
}

HTML:

<div style="width: 980px; border: 1px black solid;">
  <ul id="nav">
    <li><a href="#">Find a Doctor</a></li>
    <li><a href="#">Why Interfaith</a></li>
    <li><a href="#">For Patients & Visitors</a>
      <ul>
        <li><a href="#">3.1 jQuery</a></li>
        <li><a href="#">3.2 Mootools</a></li>
        <li><a href="#">3.3 Prototype</a></li>
      </ul>
    </li>
    <li><a href="#">Medical Services</a>
      <ul>
        <li><a href="#">Behavioral Health</a></li>
        <li><a href="#">Clinical Laboratory</a></li>
        <li><a href="#">Dentistry</a></li>
      </ul>
    </li>
  </ul>
</div>

Can someone tell me where I have to edit to complete the code?

Thanks

The ul is filling the entire div. It's your list items and their contents that aren't wide enough. — j08691, Jul 06 '12 at 21:12
I took the liberty of formatting the code for you because people are WAY more likely to help when the code is neatly presented. Trimmed off some of the HTML (list items that weren't needed for the sake of an example). (Aside: So weird that language hinting still doesn't trigger CSS formatting... wonder if I missed something?) — Greg Pettit, Jul 06 '12 at 21:23
Here is a fiddle of just that code sample. Interfaith, does it represent the problem? http://jsfiddle.net/68LGr/ — Greg Pettit, Jul 06 '12 at 21:30
Greg, your jsfiddle link is the issue i am having. It doesnt stretch to fit the entire DIV. any idea? — Interfaith, Jul 09 '12 at 16:51

score 0 · Answer 1 · edited Jul 15 '12 at 06:07

0

Try Setting the desired width to width:inherit!

edited Jul 15 '12 at 06:07

akjoshi

15,374
13
103
121

answered Jul 06 '12 at 21:12

SHAKIR SHABBIR

1,295
1
14
25

score 0 · Accepted Answer · edited Aug 15 '12 at 23:10

0

Why don't you try with em instead of percentage, or you can use a JavaScript like:

document.getElementById('ul').style.width=(document.body.clientWidth-10)*9;

You need to adjust the values of 10 and 0.9 accordingly.

Or, something like:

var viewportwidth;
if (typeof window.innerWidth != 'undefined')
{
viewportwidth = window.innerWidth;
}
 var boxwidth = parseInt(viewportwidth)*0.57;
var boxwidth2 = parseInt(boxwidth)+6;
window.onload=function(){

document.getElementById('ul').style.width = boxwidth2 + 'px';
}

I did not test this code though.

edited Aug 15 '12 at 23:10

user229044

232,980
40
330
338

answered Jul 06 '12 at 21:22

argentum47

2,385
1
18
20

I would hesitate to use JavaScript except as a last resort. Filling a horizontal menu *is* kind of tricky with CSS, though. – Greg Pettit Jul 06 '12 at 21:29
one thing i would like to say, when i didnot use the the css styles were working fine but when i mentioned the doctype things got distorted, i adjusted the position with % and the sizes with em – argentum47 Jul 06 '12 at 21:32
and i think the reason is, when u are mentioning the width of the box as 100% then we are not mentioning with respect to what the width id 100%. when were say body{width:100%;} then it is with respect to the clients window size. i think if u have a div class of a width and height of certain px say 100px by 100px, in that case, inside that div ul{width =100%;} will work – argentum47 Jul 06 '12 at 21:38
But the width of the div holding it is set with inline styles to 980px. I assumed he wanted the top-level-menu items to be evenly spaced throughout the horizontal nav bar, as wide as 980px (or in the event of responsive layout, whatever the width happens to be at the time). The subject is "fit width of DIV" not "fit width of viewport". – Greg Pettit Jul 07 '12 at 03:09

score 0 · Answer 3 · answered Jul 15 '12 at 01:39

You do not need to use javascript for that.

Here is a very simplified example: http://jsfiddle.net/hghzL/

<div style="width: 600px; border: 1px black solid; background: red">
  <ul id="nav">
    <li><a href="#">Find a Doctor</a></li>
    <li><a href="#">Why Interfaith</a></li>
    <li><a href="#">For Patients & Visitors</a></li>
    <li><a href="#">Medical Services</a></li>
  </ul>
</div>

*{
  margin: 0;
  padding: 0; 
}

html{
  background: #111;    
  font-size: 12px;
  font-family: Verdana, sans-serif;
}

#nav{
  list-style-type:none;
  overflow: hidden;
  background: #222;
}

#nav a{
  color: #fff; 
  display: block;
  padding: 10px;
  text-decoration:none;
  background: #444;
}

#nav a:hover{
  background-color:#fff;
  color:#333;
}

#nav li{
  float:left;
}

This is without all the fancy submenus.

A bit more advanced version (source).

Stretch UL to fill the entire DIV

3 Answers3