The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

Overlapping CSS Elements

  • # November 29, 2012 at 3:38 pm

    On this site: [Example]( “”) 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;

    .pagination {
    .pagination a {

    # 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

    # November 29, 2012 at 7:25 pm


    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.


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

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed