Grow your CSS skills. Land your dream job.

Overlapping CSS Elements

  • # November 29, 2012 at 3:38 pm

    On this site: [Example](http://themeforward.com/demo2/ “http://themeforward.com/demo2/”) I have a newer/older link on the bottom of the page. This lies below .excerpt in .pagination. However, adding padding to the link pushes the padding up into .excerpt, making the two elements overlap. I would like my pagination links cleanly lie below .excerpt.

    I’d appreciate any help in solving this issue; my current CSS is below:

    .excerpt {
    padding:25px 0;
    border-bottom:1px solid #DDD;
    width:100%;
    overflow:hidden;
    clear:both
    }

    .pagination {
    clear:both;
    width:100%
    }
    .pagination a {
    background:#3300FF;
    padding:2%
    }

    # November 29, 2012 at 3:52 pm

    Why not just apply padding to `.pagination` as well?

    # November 29, 2012 at 7:03 pm

    just float the anchor

    otc
    # November 29, 2012 at 7:25 pm

    Hello,

    You have many solutions however if you want something to be at a very specific position you should make its position to relative and play with the top/right/bottom/left properties.

    Example:


    .excerpt {
    position: relative;
    top: 5px;
    width: 100%;
    padding: 25px 0;
    border-bottom: 1px solid #DDD;
    overflow: hidden;
    clear: both
    }

    Good luck

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".