Ignored overflow value when applying percentage height hack

Looking for a solution to address an issue with CSS grid of squares responsiveness? Consider the following CSS declarations:

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

nav a p {
  display: none;
}

nav a:hover p {
  display: block;
}

The problem arises when overflow: hidden is not respected upon displaying the child element, causing it to extend beyond its parent and disrupt the layout.

It seems that the percentage-based hack used for flexible squares might be causing this issue, as fixed heights work as intended.

Are there any workarounds or alternative techniques that could potentially resolve this issue?

Check out the Fiddle for reference.

css

Answer №1

It has been noted that the issue with the fifth element being out of place is due to the padding-bottom property. Essentially, when hovering over the <a> element, its height increases along with the revealed <p>, followed by an additional 25% padding-bottom which causes the element below to shift right.

To resolve this issue, one can consider absolutely positioning the revealed <p> so that its height does not affect the padding calculation.

Check out this JSFiddle for reference

In terms of whether this solution is ideal, it may not be necessary as flexbox is widely supported in modern browsers.

Answer №2

To implement absolute positioning in the nav a p class, add the following CSS:

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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilizing the map function in React to create a button reference

I am currently facing an issue that is relatively simplistic and doesn't have any real-world application. My goal is to locate a 'green' button and make it blink for a duration of 3 seconds. How can I achieve this using React? const btnLay ...

javascriptcssreactjs

Tips for customizing the color of the current date in the angular-material datepicker

I've created a function in angular-material to disable dates two days from now, but I'm struggling to change the color of the current date if it's disabled. The issue is that when the current date is disabled, it displays in a very light blu ...

javascriptcssangularjsdatepickerangular-material

Chrome by Google is experiencing issues with displaying stylesheets

Here is a script I have been using: <?PHP $Document = $_GET["Name"]; Switch($Document) { Default: Echo "Incorrect document name! Please check if it exists."; Exit; Case "Style": $Document = "Folder/Styles/MainS ...

phpcssgoogle-chrome

Avoid loading external scripts from third-party sources such as JavaScript libraries, Bing Maps API, and Lighthouse performance tool

Issue: The Bing maps API I incorporated into my assignment is loading unnecessary CSS and scripts, causing a noticeable decrease in my lighthouse scores. Is there a way to prevent third-party code (such as Bing Ads) from loading when fetching the maps for ...

javascriptcssrequestbing-mapslighthouse

Creating a top-to-bottom pull effect on a single page, similar to the Android title bar, can be achieved using CSS3

Is there a way to achieve an effect in HTML that resembles the pull title bar animation from top to bottom in Android? Any suggestions on how to create this effect or what tools I would need? Currently, when I swipe, the page simply displays a following ...

javascriptandroidjqueryhtmlcss

The CSS cursor style is taking precedence over the inline cursor style while dragging items in the list

I am currently utilizing the Nestable JS library and have a list of nestable items in my tree. I am trying to implement a cursor: pointer when hovering over them and a cursor: move when dragging. However, I am facing issues in getting this functionality to ...

javascriptjqueryhtmlcssjquery-ui

Display the chosen alternative in a Bootstrap dropdown menu

I am currently facing an issue with the dropdown list in my bootstrap menu. <li class="dropdown"> <a aria-expanded="false" aria-haspopup="true" role="button" data-toggle="dropdown" class="dropdown-toggle" href="#">Chose option<span class="c ...

javascriptjqueryhtmlcsstwitter-bootstrap

What could be causing the inability to apply CSS to customize form content?

I've just wrapped up creating a sign-up form, but I seem to be having trouble utilizing display:inline-block. What could possibly be the issue? The internal elements are stubbornly glued together and refuse to budge. (On another note, any suggestio ...

javascripthtmlcssreactjs

Centered inline-block divisions

I've been coding for a number of years now, but I've recently started learning CSS. I'm currently facing an issue and need some help. I want to place two divs next to each other and center them. Here's the code I'm using: HTML: & ...

htmlcss

Styling for Print Media: Adjusting the horizontal spacing between inline elements

I have been developing a custom AngularJS point-of-sale (POS) system that requires printing receipts upon completing a sale. To achieve this, I am using ng-print to print out a sales summary displayed within a specific div element after hiding all other un ...

cssangularjsprintingmedia

What sets apart element.class from element .class in CSS?

I've been puzzled trying to figure out why my CSS was not applying when I had mydiv .myclass { font-size: 24px !important; } But then I randomly decided to try mydiv.myclass { font-size: 24px !important; } and surprisingly it worked perfectly. Wh ...

htmlcss

The grid image is refusing to fall into formation

I have been attempting to align the image in section-1 to the right side, but for some reason, it's not cooperating. I initially tried using flex-box, but I want the image to remain fixed on the right side of the screen without any movement. Floats ca ...

htmlcss

Tips for resolving the issue of "unable to load style sheet" in Bootstrap

I'm having trouble getting the grey color navbar to show up on my website. Instead, I keep getting a red error sign at the bottom saying "Stylesheet could not be loaded". I've tried removing one CSS file at a time, but nothing seems to be working ...

javascripthtmlcsstwitter-bootstrap

Step-by-step guide for serving static JavaScript files using NextJS

I am currently exploring the process of hosting static js and css files using NextJS. My journey began with creating a react app through create-react-app, where I developed an App component before executing the npm run build command. This resulted in the ...

javascripthtmlcssreactjsnext.js

Tips for aligning all positioned elements in a div

I am trying to center absolute items inside my .child_div element with a green background. How can I do this properly? .parent_div { position: relative; background: lightgreen; width: 1200px; margin: auto; } .child_div { position: relative; ...

htmlcss

Gather data from various HTML elements with JavaScript when submitting a form

How can I extract values from HTML elements and send them for processing through a form? I'm attempting to compile a menu item list with the individual items' structure in place, but I'm struggling to figure out how to fetch the values upon ...

javascripthtmlcss

Issue with borders not displaying on cards in Bootstrap 3.4.0

In the 3.4.0 version of Bootstrap, I am facing an issue where cards are not showing borders. I am attempting to include multiple cards within a panel. I have tried using the "!important" property for the border, as well as using classes like "border-prima ...

htmlcsstwitter-bootstrap-3

Preventing checkbox selection with CSS

Can CSS be used to deactivate clicks on checkboxes while still maintaining their functionality for dynamically setting values using Javascript? I have not been able to find a suitable solution. pointer-events:none Unfortunately, this did not work as expe ...

htmlcsscheckbox

Centering Text and Image in React Horizontally

I'm attempting to achieve a layout similar to the one shown in the image below. Currently, my image is positioned at the top with the text below it. I would like to arrange it so that the text appears on the right side of the image. Please take a loo ...

cssreactjsmaterial-uiflexboxjss

When an option is selected on the navigation bar, side bars appear for additional navigation

How can I remove the bars on the side of the navigation bar when hovering over it? I don't want to alter the appearance or position of the navbar itself, just the parts that are affected by hovering over it. HTML: <!DOCTYPE html PUBLIC "-//W3C//D ...

cssxhtmlhtml