Support » Fixing WordPress » Problem Lining up Two Element Widths in CSS.

  • Resolved martcol


    In this page:

    You can see that I want the <h2> and the content <div> to appear as one box but they won’t line up on the right border by one pixel.

    Any suggestions as to why and how to fix it would be great.



Viewing 2 replies - 1 through 2 (of 2 total)
  • The two elements have different amounts of padding, removing the padding fixes the widths not matching..

    Plonk this at the bottom of your stylesheet and you’ll see the widths then match up..

    .post h2,
    .post div.entry { padding:0!important }
    .post h2 a { margin: .5em 0!important;line-height:2.3em!important }
    .post div.entry { padding: .5em 0 0!important }
    .post div.entry p { margin:0 .5em .5em!important }

    Remove that code and update your existing definitions afterwards, it’s simply there to serve as an example for forcing CSS so you can see the effect the changes have on your page.

    Many thanks Mark

    I think I found an alternative fix by removing 100% width on that h2 and div. Maybe your way is a bit cleaner?

    It’s left me a bit more confused about that 100% thing. I thought that it would just make the element 100% of the containing element but it must be adding the padding too.

    Anyway, thanks for your time.


Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Problem Lining up Two Element Widths in CSS.’ is closed to new replies.