CSS: Is there a way to create a square div that is always the same size as the smallest dimension of its parent container?

Check out this codepen that showcases my issue:

http://codepen.io/anon/pen/xwQpLy?editors=110

I've been using a little trick to maintain a 1:1 ratio for the box: 

.squarebox {
  position: relative;
  width: 100%;
}
.squarebox::before {
  padding-bottom: 100%; 
  content: "";
  display: block;
}
.content {
  position: absolute; 
  top: 0; 
  right: 0; 
  bottom: 0; 
  left: 0;
}

However, I'm looking to have the box always fill the smaller of the parent's width or height. In the current setup, it only fills the parent's width.

css

Answer №1

Is this the kind of solution you were looking for?: http://codepen.io/anon/pen/yYQpqp?editors=110

To achieve this layout, the parent element should have a position:relative, while the .content div must have a width and height set to 100%, along with positioning relative properties such as top, right, bottom, and left all at 0.

I removed the squarebox div from the code snippet provided.

.squarebox {
  position: relative;
  width: 100%;
}

.content {
  width:100%;
  height:100%;
  position: absolute; 
  top: 0; 
  right: 0; 
  bottom: 0; 
  left: 0;
  background:orange;
}

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

Use JQuery to constantly monitor for any changes in HTML Div

I am dealing with a browser-based chat application where separate div elements are generated for each chat conversation. An external module oversees the entire chat process, and I do not have access to its underlying code. It is important to note that the ...

jqueryhtmlcssdom

Equal spacing title in horizontal menu with Bootstrap design

Is there a way to evenly distribute menu links with varying text lengths in equal width bootstrap columns? Adjusting the column class between col-md-1 and col-md-3 doesn't seem to give accurate spacing. If you want to see, I've set up a fiddle h ...

csstwitter-bootstrap

What is the best way to ensure that text moves to the next line if it exceeds the boundaries of the parent div in either CSS or

I am looking to have the "remaining books count" and "remaining pens count text" automatically move to the next line below the numbers when they exceed two digits, causing an overflow in their parent div. Here is the code snippet I currently have: functi ...

javascripthtmlcssreactjs

Is there a way to conceal a div class on the Payment page in Shopify?

I have encountered an issue with the code on the Shopify checkout (Payment) Page. Unfortunately, I am unable to directly edit this page within Shopify, but I have discovered that it is possible to add custom CSS or HTML code within the checkout settings of ...

javascripthtmlcssshopifyshopify-template

Removing sort icon from the first column of a DataTable using jQuery

Is there a way to completely disable the sorting property in the dataTable API? I tried using bsort:false to disable sorting in all columns, which works fine, but the first column still displays the sort icon. Why is that? $("#reportgrid").DataTable({ ...

jquerycsssortingdatatableremoveclass

Styling a floating options menu in React Select

Hey there, I've been tackling the react-select implementation and ran into a css issue. When react-select is opened within a container with overflow:auto (which I can't modify since it's not part of my app), the options are displaying like ...

javascripthtmlcssreactjsreact-select

Are programmatic clicks distinguishable from manual clicks in JQuery?

Currently, I am in the process of creating selectable and draggable elements for a table. You can test the functionality by following this JsFiddle link (please try vertically selecting). Initially, the selection works well but upon trying to select for th ...

javascriptjqueryhtmlcss

What is the best way to eliminate the dotted border from clickable images?

The client has expressed their dislike for the dotted border, but I believe it is important to keep it for accessibility reasons. However, I suppose I will have to remove it since the client requested it. How should I proceed? ...

htmlcssimage

Unable to resize the div to fit the content

My container div is not adjusting its height based on the content inside. It expands according to the header and navigation divs, but not the sidebar which is nested inside another div. Here is the HTML structure: <div id="container"> <div ...

htmlcssheight

Submenu animation that "bursts onto the scene"

I'm facing an issue with my menu that has sub-items inside it. To achieve the animation effect I desire, I need to extract the width, height, and first-child's height of the sub-menu. While my animation is working most times, there are instances ...

javascriptjqueryhtmlcssanimation

Tips for placing the html <a> tag above an image and centered

Here's the HTML code I'm struggling with, which is inside an ASP.NET Repeater: <div class="team_member"> <a class="teamMemberLink" href='<%# "Profile.aspx?uID=" + Eval("ID") %>' target="_blank"><%# Eval("Name") ...

htmlcss

The Bootstrap carousel's transition effect is not functioning as expected

The fade transition I added to my Bootstrap 4 carousel isn't working properly. It seems like the effect is not being applied to the carousel. Here is the HTML code snippet: <div id="testimonialsSlides" class="carousel carousel-fade" data-ride="fa ...

csstwitter-bootstrapcarouselbootstrap-4

retrieve the position of a descendant element in relation to its ancestor element

I'm encountering a challenge while attempting to solve this issue. I have elements representing a child, parent, and grandparent. My goal is to determine the offset position of the child (positioned absolutely) in relation to the grandparent. However, ...

javascriptjqueryhtmlcss

Issue with changing the height of a textarea in a mobile browser when it is

I'm currently facing an issue specific to mobile devices that I have also encountered on Google Chrome (even when using the developer tools in mobile view). The problem is quite straightforward. There is a simple form on the website, consisting of a ...

htmlcssmobile-websitemobile-browsermobile-chrome

Issues with the play() method in Javascript across Firefox, Safari, and IE 11 are causing functionality problems

I developed a basic video and audio player that smoothly fades out an introductory image and starts or stops playing an mp4 file upon click. Everything functions properly in Chrome, but unfortunately does not work in other major browsers. Despite checking ...

javascriptjqueryhtmlcss

Emphasize the words within the text box, but wait before doing

I want to create a feature where a single line of text in a <textarea> is highlighted with a time delay. Can I also choose different colors for the highlight? My goal is to have each line turn blue when clicking on individual buttons sequentially. Fo ...

javascriptjqueryhtmlcsstextarea

When pressed, the button changes color to a vibrant shade of blue, and not just a simple outline

I'm experiencing an issue with a button that turns blue when the user holds onto it for a while on mobile. You can see an example in the image below: https://i.sstatic.net/VmnZ8.png Adding ::selected or outline did not resolve the problem as the ent ...

javascripthtmlcss

The image fails to appear

Check out my website at www.wostokhr.pl I am having trouble getting the picture "pics/hero.jpg" to show up in the "div id="hero"" section with a JS parallax function. I have double-checked the HTML and CSS validators and everything seems to be correct. An ...

htmlcss

Using jQuery's toggleClass method to implement CSS transformations

I have a question about this situation Each time the button is clicked, jQuery toggles the class: .transition { background-color: #CBA; transform: translateX(100px) scale(0.5) rotate(180deg); } Within the <div class="container2"> And upon ...

jquerycsstoggleclass

The loading cursor in IE7 flickers incessantly, causing the webpage to lag and become un

When I move my cursor and click in text fields, the page becomes unresponsive and shows a wait cursor. If you're curious to see this issue in action, check out this video. This problem is specific to IE7. I've attempted to identify any ajax re ...

javascriptcssinternet-explorer-7