Styling <hr> not displaying as expected

http://jsfiddle.net/kWJ79/17/

1. Why is my <hr> so short?
2. Why is the gap at the bottom of the #wrapper bigger than th开发者_JAVA技巧e 20px padding size specified?

1. the parent <div id="vr"> to your <hr> is set to width 1px (and float:left) so the <hr> is 1px wide

2. the #wrapper has extra space because of the #wrapper:after pseudo class adding a display:block and content:"." to the end of the wrapper gives it an extra line at the bottom, it's not extra padding

maybe consider #wrapper {overflow:hidden;} as an alternative to using an :after pseudo class

http://jsfiddle.net/pxfunc/kWJ79/24/

#vr is set to height: 100%, so it takes the full height of it's parent, #wrapper. Which contains only floated children and does not have a height specified. You can specify the height of #vr as height: 554px; and it will line up. Or you can specify a height on #wrapper but that will require other mods.

The hr doesn't appear short to me. What browser are you using?

The reason there appears to be padding on the #wrapper is because you have content in it (wrapper::after) which is being rendered by the browser so it's height it included within the wrapper div.

Edit: seen the hr, for some reason I missed it when examining the code in Chrome. As said previously, the containing div is only 1px.