kim holder kim holder -4 years ago 143
CSS Question

Why is this ul exceeding the size of it's div?

Although li.textmenu has width: 140px, padding: 5px, and div.textmenu has width: 150px, the one list item i've made so far has a big left margin, and extends beyond the right edge of the div by a good 30px. Could someone explain why?


div.textmenu {
background-color: #3b3b3b;
float: left;
width: 150px;
margin: 30px 10px 0 30px;

li.textmenu {
background-color: #4a4a4a;
margin: 0;
padding: 5px;
border: none;
width: 140px;
list-style: none;
text-align: right;


<div class="textmenu">
<li class="textmenu"><a class="pink" href="">Stress Causes Addiction</a></li>

Answer Source

Did you add a zip/uni reset to the top of your css file?

* { margin:0; padding:0; }

( Put that exactly as is at the very top of CSS to override browser default margins/padding ).

Most likely the ul is being given default padding/margin, so this is to counter-act it.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download