Question

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>

Answer 1

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>