1

I was browsing the other related threads but i couldnt find a fix.. The Div does not fill 100% of the screen with the chosen background color, only the width of the <li> CSS:

#menuspace{
    background: #2175bc;padding:0;margin:0;width:100%;
}
#menubutton {
margin:0;
    padding: 0;
    width:100%;
}

#menubutton li {
    display: inline;
}

#menubutton li a {
    font-family: Arial;
    font-size:11px;
    text-decoration: none;
    float:left;
    padding: 10px;
    background: #2175bc;
    color: #fff;
}

HTML:

<div id="menuspace">
<ul id="menubutton">
<li><a href="http://www.example.net/">Home</a></li>
</ul></div>
6
  • 2
    What contains the menuspace div?
    – icktoofay
    Mar 17, 2012 at 3:48
  • What effect specifically are you trying to create? I'm quite confused. Just a menu DIV with a set of buttons inside? Why is a <ul> useful here? Mar 17, 2012 at 3:54
  • Its a menu... i just left out the remaining 7 <li> tags to not waste space in this post.
    – Sorcher
    Mar 17, 2012 at 3:54
  • DIV is a block element & it's take auto of the element so there is no need to define width:100% to it
    – sandeep
    Mar 17, 2012 at 3:55
  • See my answer and let me know if any thing i am lagging so i can make the changes as per your requirement.
    – w3uiguru
    Mar 17, 2012 at 5:16

7 Answers 7

2

The problem is the 'float: left' on the #menubutton li a. Remove that and the div will go 100% of the screen. The float makes the parent div menuspaces think that there's really no content contained in it (the div is actually going 100% but has no height). You could also leave the float in there and simply add some content:

<div id="menuspace">
<ul id="menubutton">
<li><a href="http://www.example.net/">Home</a></li>
</ul>Look the div goes to 100% now</div>
1
  • Ah dont work, just messes the li items all over the place, But overflow:hidden works except now other div's are pulled over it.
    – Sorcher
    Mar 17, 2012 at 4:03
1

Try this fiddle -

Fiddle: http://jsfiddle.net/8LFLd/

Demo: http://jsfiddle.net/8LFLd/embedded/result/

Note: I have added hover on <a> tag so it look better.

1
  • Thank you kind expert. I appreciate it, works fine now, had to fix some other contents that was pulled over it, but needed to be done anyways.
    – Sorcher
    Mar 17, 2012 at 15:22
0

There is a float in your #menubutton li a so you have to clear is his parent which is #menubutton. So, write like this:

#menubutton{
 overflow:hidden;
}
0

Change your css for menuspace to this:

#menuspace{ 
    background: #2175bc;padding:0;margin:0;overflow:auto;
}

The reason why you are having this issue is because of the float:left on the li tag. overflow:auto on parent element will clear floats (or you can add an empty div right after ul and set style to clear:both on it).

0

There are at least two ways to fix this.

  1. Float #menuspace as well. (fiddle)
  2. Add an empty div after the ul with float: none; clear: both applied. (fiddle)

There are probably more ways to accomplish what you're after (as suggested above by others).

2
  • No success. I give up, i'll just copy&paste a menu from somewhere, i hate css.
    – Sorcher
    Mar 17, 2012 at 4:46
  • What browser are you having the problems with? Or is the solution (that works in the fiddles) not working in your code? If it's the latter, we'll need to see more of your code in order to figure out why the solutions we've posted thus far are not working for you.
    – pete
    Mar 17, 2012 at 11:44
0

see this

http://jsfiddle.net/U5JFE/2/

0

Hi you don't need to give width and all it will take automatically the width for deep details check it my example its simple :

http://jsfiddle.net/U5JFE/7/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.