Correct aspect ratio on fluid width elements of different sizes

Question

I have following responsive pattern:

In demo, all blocks have same height but width could be either 25% or 50% (it changes on lower resolutions but that is not relevant in this case). Since width is fluid, to keep aspect ratio, I used padding hack. My problem is setting correct padding size for double width elements.

To calculate padding for regular element I use percentage from formula x/y where x is height and y is width based on design mockup.

To calculate percentage for double sized element I use formula x/(2*y + 2*z) where z is size of gutter between elements (6px in demo example).

This code seems to work fine until I start resizing window and on some points layout breaks because normal and double sized elements have different heights. I suspect this happens because of how browser calculates percentage values. So my question is: is it possible to adjust calculation in my code to always get correct aspect ratio regardless of element widh?

relevant code:

HTML

<ul class="u-cf">
  <li class="double"></li>
  <li></li>
  <li></li>
  <li class="double"></li>
  <li></li>
  <li></li>
</ul>

CSS (Sass)

ul {
  margin: 0;
  padding: 6px;
  list-style: none;
  clear: both;
}

li {
  position: relative;
  padding: 6px;
  width: 25%;
  float: left;
  &:before {
    content: "";
    padding-top: percentage(280/405);
    display: block;
    height: 0;
  }
}

.double { 
  width: 50%; 
  &:before {
    padding-top: percentage(280/822); // 2*405px + 2*6px
  }
}

I have a feeling you might have to change your design to get this to work. Have you tried increasing the number of decimal places used (see: http://stackoverflow.com/questions/7672473/sass-and-rounding-down-numbers-can-this-be-configured)? — cimmanon, Dec 08 '14 at 11:56
Yeah, I tried setting percentages to have 10 decimal places and then to have only one. I both cases layout breaks, only on different resolutions. — Teo Dragovic, Dec 08 '14 at 12:14

score 2 · Accepted Answer · answered Dec 09 '14 at 07:56

2

Okay, I had to adjust the markup, but got it working, using spans inside. For the margin I used the calc function.

<ul class="u-cf">
    <li class="double"><span></span></li>
    <li><span></span></li>
    <li><span></span></li>
    <li class="double"><span></span></li>
    <li><span></span></li>
    <li><span></span></li>
</ul>

Check out the pen here: http://codepen.io/bekreatief/pen/MYKBgE?editors=110

answered Dec 09 '14 at 07:56

KreaTief

416
1
4
13

Thank you, this works even when I change container width on breakpoint to 33.33% and 66.66% and I already had apsolutely position element inside for content. I quess mixing fluid width with fixed width padding was givin browsers issue. – Teo Dragovic Dec 11 '14 at 07:45
yeah browsers usually don't like that. Happy it solved your problem :) – KreaTief Dec 11 '14 at 23:36

Correct aspect ratio on fluid width elements of different sizes

1 Answers1