Forums

Get help. Give help. A Web Design and Development Community.

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

    This reply has been reported for inappropriate content.

    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.

We have a pretty good* newsletter.