CODEWITHSUNDEEP
css
pdoherty926
pdoherty926

Reputation: 10359

Overflow value being ignored when using percentage height hack

Given the following CSS declarations used to create a responsive grid of squares:

nav a {
  display: block;
  float: left;
  overflow: hidden;
  padding-bottom: 25%;
  width: 25%;
}

nav a p {
  display: none;
}

nav a:hover p {
  display: block;
}

overflow: hidden is not being respected when the child element is displayed. The child appears to extend the height of the parent and pushes the element below its parent out of place.

I'm pretty sure this is a result of using the padding-bottom/percentage hack I'm using to achieve flexible squares, as everything works as expected when using fixed heights.

Is there a workaround? Is there a different technique I should be using?

Fiddle

Upvotes: 0

Views: 116

Answers (2)

derp
derp

Reputation: 2308

You are correct in that the padding-bottom is causing the fifth element out of place. When you hover over your <a>, the height of the element is increased by the height of the revealed <p> and then an additional 25% padding-bottom is added on top of that hence causing your element below to be shifted right.

To avoid this, we can absolutely position your revealed <p> so that its height is not calculated when adding the padding-bottom.

https://jsfiddle.net/2qaz1dLx/2/

As for whether this is a good idea...probably not, flexbox is pretty well supported in modern browsers nowadays

Upvotes: 1

Joe B.
Joe B.

Reputation: 1174

Add position: absolute to the nav a p class

nav a p {
  position: absolute;
  display: none;
}


nav {
  display: block;
  width: 100%;
}

nav a {
  display: block;
  float: left;
  overflow: hidden;
  padding-bottom: 25%;
  width: 25%;
}

nav a p {
  position: absolute;
  display: none;
}

nav a:hover p {
  display: block;
}
<nav>
  <a>
    one
    <p>one child</p>
  </a>
  <a>
    two
    <p>two child</p>
  </a>
  <a>
    three
    <p>three child</p>
  </a>
  <a>
    four
    <p>four child</p>
  </a>
  <a>
    five
    <p>five child</p>
  </a>
</nav>

Upvotes: 1

Related Questions