Forums

siouxfan45

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;
  width:100%;
  overflow:hidden;
  clear:both
}

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

ChrisP

Why not just apply padding to .pagination as well?

wolfcry911

just float the anchor

otc

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

treehouse : what would you like to learn today?

Forums

Overlapping CSS Elements