Issue with Fluid Square Divs and Box-Sizing

I'm currently working on creating a responsive fluid div that maintains its square shape as the page is resized. I've come across a method that involves using the following CSS code:

div{
    width:25%
    padding-bottom:25%;
}

However, it seems that this only works with the default box-model layout. Is there a way to achieve the same result while using

box-sizing: border-box;

If you'd like to see my current html structure in action, feel free to visit my Code Pen here: Code Pen

Answer №1

If you have the ability to modify the HTML:

  • Place the link text inside a span element with absolute positioning.
  • Set the values of left, right, top, and bottom to 0.

View Updated Demo Here

HTML

...
<a href="#"><span>Sed volutpat</span></a>
<a href="#"><span>Sed volutpat</span></a>
...

CSS

...
a {
    position: relative;
    width: 80%;
    padding-bottom: 80%;
    ...
}
a span {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    ...
}

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

What is the best way to link styleUrls to a CSS file located in a different directory?

I am trying to include the CSS file src/app/shared/layouts/admin/admin.component.css in my component located at src/app/admin/create-company/create-company.component.ts How can I properly reference this css file in the styleUrls of create-company.componen ...

showing sections that collapse next to each other

I am currently designing a portfolio website using HTML, CSS, and vanilla JavaScript. I have implemented collapsing sections that expand when clicked on. However, the buttons for these sections are stacked vertically and I want to place them side by side. ...

Is there a way to adjust the background hues of a React component when a click event is triggered?

Currently, I have 3 React components that each consist of a div element. When I click on one component, I want to change its background color to black. If I then select another component, the previously selected component should return to its normal back ...

Utilize cURL to retrieve a file from a webpage designed for automatic downloads

I am currently working on a script to automatically download and install the most up-to-date versions of specific applications. Is there a simple way to download the latest program from a website? For instance, if we look at the Firefox download page: On ...

"Position the input file with Bootstrap's input text for a seamless alignment

After experimenting with the design of my input file using this code snippet, I am facing difficulties aligning the button within the text input of a bootstrap element. Below is the code I have used to style my input field, but unfortunately, the bootstra ...

Tracking changes in real time and calculating the sum with AJAX, PHP, and MySQL for efficient processing

Initially, I kindly request you to read this until the end. I am in dire need of assistance with my problem as I have searched for solutions but still remain clueless. https://i.sstatic.net/DAb1q.png Referring to the image provided, the first 'Produ ...

Delete the tag that comes before

Is there a specific tag like: <p id="name" onclick="javascript:var ele=context(this);">sumtext here</p><br> <p id="name" onclick="javascript:var ele=context(this);">newtext here</p><br> <script ...

Error message indicating that the function 'slice' is not defined for the data variable

I've already searched for solutions to a similar issue, but none of them worked for me. I'm dealing with an object that fetches a list of cities including their names, populations, and states. Here is my HTTP service request: cidadesUrl = 'h ...

How to extract the date value from an HTML date tag without using a datepicker

Utilizing Intel's app framework means there is no .datepicker method available. The following code snippet generates the date widget within my app: <label for="startdate">Start Date:</label> <input type="date" name="startdate" id="star ...

Side-to-Side Bootstrap Display Panel

I have been attempting to customize a Bootstrap panel to create a horizontal version, but I am struggling to align the panel heading vertically with the content in the panel body. I believe it may be related to clearing the divs. Front-end development is ...

How can I properly save a PNG image with alpha transparency to be compatible with IE6?

Seeking advice on saving a visually pleasing 1 or 8-bit PNG image that renders well in IE6. Open to suggestions on alternative methods as I have experience with Fireworks but exploring new options. Thank you in advance! ...

The align-self-center property in Twitter Bootstrap Flex does not properly center elements vertically

I recently started working with twitter bootstrap 4.4.1 and flex to create a unique layout for my project. My main goal is to have a navbar at the top and the content displayed in the middle of the screen, as shown in the image here: https://i.sstatic.net ...

Creating 3D audio effects in HTML5

Let's dive into the challenge... Currently, I'm working on building a virtual environment with WebGL (THREE.js) where various objects produce distinct sounds. My goal is to create a surround sound experience based on the position of these object ...

BEM Methodology: Ensuring the CSS value in one block takes precedence over property definitions in another block

I'm facing a challenge with BEM as I try to make properties from one block take precedence over styles in another. Some might suggest adding a modifier for .button, but in some cases, specific properties need to be applied only on certain pages withou ...

struggling to browse through HTML files in eclipse while utilizing the Tomcat server

Using Eclipse Juno with Tomcat 7, I created a java dynamic web project and added a folder named home in the WebContent directory. Inside this folder, I included files address.jsp and h1.html. I wanted to link h1.html from address.jsp. The code I used was ...

Using Sencha Touch: What is the best method for populating an HTML panel with a JSON response?

I've exhausted all possible combinations in my attempts to load a JSON object from the server and use it to render a panel with video and other information. Despite my efforts, I haven't been able to make anything work. What could I be doing inco ...

What could be causing my JSON product list to not load properly?

My list is not loading and I can't figure out why. I've included my json, jquery, and HTML below. The console isn't showing any errors, but the list is still blank. Any help would be greatly appreciated as I am new to working with json. Than ...

Customize the background color of highlighted text using HTML and jQuery

Recently, I modified an existing code to divide plain text into four classes by selecting a portion of the text and coloring it. Afterwards, I extracted the text of each class and stored it in my database. While this code works well, I am looking for a way ...

Using Jquery to dynamically add or remove a class based on scrolling behavior

Can someone help me with identifying the position of an element so that when the user scrolls to it and it appears on the screen, an icon can be highlighted? Currently, the script I am using adds the class too early, closer to the bottom of the block. I w ...

Avoid shifting focus to each form control when the tab key is activated

I have a form where users need to be able to delete and add items using the keyboard. Typically, users use the tab key to move focus from one element to another. However, when pressing the tab key in this form, the focus only shifts to textboxes and not t ...