Challenges with adjusting the dimensions of varying-sized fluid squares that are floated

Question

Challenges with adjusting the dimensions of varying-sized fluid squares that are floated

I've been facing a roadblock in my coding project since yesterday afternoon. I'm trying to transform a classic unordered list menu into a tiled "gallery" within a 12 column grid, with fluid square tiles.

When the squares are floated, the first square takes up more space than it should, causing layout issues at certain resolutions. I've tried adjusting the width and padding of the first square, but it hasn't fully resolved the problem.

Switching to displaying the squares inline-block eliminates the resizing issue, but presents a new challenge of aligning the squares correctly on the same line.

If anyone has insight on fixing the resizing issue when floating or getting the squares to flow properly with display inline-block, please share your expertise.

-- Edit --

Additional info:

For smaller screens, I plan to adjust the number of columns and flow them under the first square to address the resizing issue. The amount of list items is dynamic, so I need a solution that can adapt to changes in the markup.

resize css-float fluid-layout css

Answer 1

Answer №1

I think this issue arises because rendering a portion of a pixel is not feasible, so extreme precision in percentages is unnecessary. This can lead to proportions breaking on smaller screens. To achieve smoother visuals, consider using different proportional values for smaller screens.

#portfolio-links li:first-child {
  padding: 0 0 47.9% 0;
  width: 47.9%;
}
@media screen and (max-width: 500px){
    #portfolio-links li:first-child {
      padding: 0 0 47.6% 0;
      width: 47.6%;
}
}
@media screen and (max-width: 250px){
    #portfolio-links li:first-child {
      padding: 0 0 47.1% 0;
      width: 47.1%;
    }
}

The downside is that the heights may not be exactly the same.

Fiddle: http://jsfiddle.net/Lzvna/4/

Edit:
Option 2:
Alternatively, if the number of elements is fixed and manual positioning is acceptable, you can use absolute positioning and utilize margin-top relative to the width:

For example:

#portfolio-links li:nth-child(4) {
  margin-top: 27%;
  left:50%;
}

Drawback: Manual effort required. Benefit: Precise appearance.

Fiddle: http://jsfiddle.net/UaCPN/1/

Answer 2

I think this issue arises because rendering a portion of a pixel is not feasible, so extreme precision in percentages is unnecessary. This can lead to proportions breaking on smaller screens. To achieve smoother visuals, consider using different proportional values for smaller screens.

#portfolio-links li:first-child {
  padding: 0 0 47.9% 0;
  width: 47.9%;
}
@media screen and (max-width: 500px){
    #portfolio-links li:first-child {
      padding: 0 0 47.6% 0;
      width: 47.6%;
}
}
@media screen and (max-width: 250px){
    #portfolio-links li:first-child {
      padding: 0 0 47.1% 0;
      width: 47.1%;
    }
}

The downside is that the heights may not be exactly the same.

Fiddle: http://jsfiddle.net/Lzvna/4/

Edit:
Option 2:
Alternatively, if the number of elements is fixed and manual positioning is acceptable, you can use absolute positioning and utilize margin-top relative to the width:

For example:

#portfolio-links li:nth-child(4) {
  margin-top: 27%;
  left:50%;
}

Drawback: Manual effort required. Benefit: Precise appearance.

Fiddle: http://jsfiddle.net/UaCPN/1/

Answer 3

Answer №2

Success! Nailed it :D

After some tinkering, the solution boiled down to clearing out the 6th list item in the stack: http://example.com/solution

The act of clearing the element (restoring it to its normal flow) allows its top margin to be overridden when the 1st element exerts pressure on it. This differs from floating an element, as floated elements do not experience margin collapse according to the specification.

Margins will not collapse between a floated box and any other box (not even with its inline children).

Credit: http://www.example.com/credits

Just when I feel like I understand the basics of document flow, floats, and clearing techniques, a new puzzle arises... Feel free to correct me if my interpretation is off base.

Answer 4

Success! Nailed it :D

After some tinkering, the solution boiled down to clearing out the 6th list item in the stack: http://example.com/solution

The act of clearing the element (restoring it to its normal flow) allows its top margin to be overridden when the 1st element exerts pressure on it. This differs from floating an element, as floated elements do not experience margin collapse according to the specification.

Margins will not collapse between a floated box and any other box (not even with its inline children).

Credit: http://www.example.com/credits

Just when I feel like I understand the basics of document flow, floats, and clearing techniques, a new puzzle arises... Feel free to correct me if my interpretation is off base.

Challenges with adjusting the dimensions of varying-sized fluid squares that are floated

Answer №1

Answer №2

Similar questions

What is the procedure for adding a background to a primeNg Tree component?

What could be causing the lack of downward rotation of my arrow in css? (specifically, the span element)

Introduce new material at the start of each line, akin to what ::before accomplishes for the initial line

Is there an animation triggered by hovering the mouse over?

Tips for adapting CSS images on mobile devices without distorting the aspect ratio

Avoid automatic background resizing to match the full width of the header text

What specific width range would be best for my needs?

Ways to enable smooth scrolling feature in Safari

I prefer boxes to be aligned next to each other without any gaps, and I won't be

Step-by-step guide to creating a dynamic button that not only changes its value but also

How can I synchronize two webkit-animations at the same speed but with one covering a greater distance?

Refresh iOS / iPad website only upon scrolling, not when utilizing anchor links

Tips for utilizing string interpolation in the style tag of an Angular component

Is there a way to display a delivery estimate underneath the product title on a WooCommerce website?

Styling emails in an inbox with CSS

I encountered an issue where my style.css file was not properly linking to my HTML code. Whenever I saved the file, it would open

What is the best way to transition an absolute positioned element from right to center?

Achieving a centrally aligned flex container with left-aligned flex items

Is there a workaround using jQuery to enable CSS3 functionality across all browsers?

Creating UL tabs using just HTML and CSSHere's a step-by-step guide