kim holder kim holder - 3 months ago 19
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?

http://www.briligg.com/frailty.html

css:

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;
}


html:

<div class="textmenu">
<ul>
<li class="textmenu"><a class="pink" href="http://www.briligg.com/frailty.html#culture">Stress Causes Addiction</a></li>
</ul>
</div>

Answer

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.

Comments