user3064626 user3064626 - 11 months ago 50
CSS Question

CSS Nav buttons move bottom left

The nav buttons sit on top of the image title div. Both drop down on hover. When going to the next image, the nav buttons are at the correct location, but when you click on the previous, the whole nav screen shifts to the bottom right!

nav {
position: absolute;
width: 100%
height: 20px;
padding-bottom: 2px;
z-index: 1;
float: right;
margin-top: -20px;
transition: margin-top 200ms ease-in;
background: black;
opacity: 0.4;
right: 1px;

.title {
position: absolute;
width: 85%;
height: 20px;
padding-bottom: 2px;
margin-top: -25px;
transition: margin-top 200ms ease-in;
background: black;
color: white;
opacity: 0.6;

.title-text {
float: left;
padding-left: 5px;

.slides:hover .title {
margin-top: 0px;

Here is link to a fiddle.

Answer Source

I fixed this part but code itself is clumsy

anyway still here is example : jsfiddle

first of all you forgot ";" in .nav { between height and width secondly dont use position: absolute and float it exclude each other try to connect similiar classes like your buttons

  color: black;
  border: 2px solid white;
  margin: 0px 5px 0px 0px;
  cursor: pointer;
  padding: 0px 5px 0px 5px;
  display: inline-block;

Quick explain, I set text-align on .nav element so buttons would be set on right side inside .nav and .btn-* for display: inline-block; (default display: block; so it would behave similiar like text.