Question

learning html/css here. I’m trying to add a border-bottom to my .menu ul li ul li

.menu ul li ul li{
padding:0;
float:none;
margin:0 0 0 0px;
width:100%;
border-bottom: 1px solid #911;
}

but the border gets cut off on the right because of the right padding in this style:

.menu ul li ul{
position:absolute;
right: 0px;
border:1px solid #911;
/*box-shadow*/
-webkit-box-shadow:0 1px 5px #CCCCCC;
   -moz-box-shadow:0 1px 5px #CCCCCC;
        box-shadow:0 1px 5px #CCCCCC;
margin-top:0px;
display:none;
padding:0px 16px 0px 0px;
}

I’m confused about why the right padding of 16px is needed… When I remove the right padding my drop down menu no longer displays correctly (the border is off and when you drop down the menu it expands to the right and causes a scroll bar to appear).

Also there is missing space on border in the bottom left corner of the drop down menu, any ideas why this is happening?

http://jsfiddle.net/vJaaR/

Thanks a ton! I really appreciate any insights.

Answer 1

If you use a width of 100% AND also apply border, padding, or margin, then your content will be larger than 100%.

For example, if your page width is 900 pixels wide.

100% of 900px is 900.
If you apply a 16 pixel padding to both the left and right, that adds 32 pixels.
If you apply a 1 pixel border, that’s another 2 pixels.
If you add a 10 pixel margin to the left and right, that’s another 20 pixels.

When you add it all up, the width of your element will be:

900 + 32 + 2 + 20 = 954

update
If you have a block level element (display: block), you don’t need to specify the width as being 100%. If you tell it to have a specific padding, margin, and border, then the width will take up the rest of the space (width: auto).