CODEWITHSUNDEEP
htmlcss
Sebastian
Sebastian

Reputation: 3626

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 the 20px padding size specified?

Upvotes: 1

Views: 294

Answers (3)

DoctorMick
DoctorMick

Reputation: 6793

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.

Upvotes: 0

Joe Flynn
Joe Flynn

Reputation: 7204

#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.

Upvotes: 0

MikeM
MikeM

Reputation: 27415

  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/

Upvotes: 2

Related Questions