WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Problem Lining up Two Element Widths in CSS. (3 posts)

  1. martcol
    Member
    Posted 3 years ago #

    In this page: pictopoetry.co.uk/category/poem/

    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.

    Thanks

    Martin

  2. Mark / t31os
    Moderator
    Posted 3 years ago #

    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.

  3. martcol
    Member
    Posted 3 years ago #

    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.

    Martin

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.