Proportionally scaling adjacent elements?

[slmille4]

I found the article at
https://css-tricks.com/scaled-proportional-blocks-with-css-and-javascript/
extremely informative, and it almost does what I need it to, but in my case I need to have two similar elements which are adjacent (currently via float: left;) which I need to have scale proportionally. What do I need to do to modify the single element version to have each element take up 50% of the available space?

[Beverleyh]

It helps if you show us what you’ve tried – why not fork the demo of Chris’ and modify it?

I imagine that you’ll be able to float 2 elements side-by-side within the #very-specific-design div, and the demo should still exhibit the same scaling behaviour.

Just remember that there is padding already on some elements that will impact upon the box model. Might be worth absorbing it all with a box-sizing reset in order to get 2 50% wide divs sitting side-by-side;

.scaleable-wrapper * { box-sizing: border-box }

[slmille4]

I think I’ve sort of done something like that, but I’m getting a problem where the inner boxes aren’t scaling quite right, so they pop out of alignment when the size of the container is reduced. The box-sizing: border-box; did help with getting the padding right though.

http://codepen.io/slmille4/pen/xOvqqx

(this is just me trying stuff randomly, so it’s not very well done)

[Beverleyh]

I’m getting a problem where the inner boxes aren’t scaling quite right

You’ve got 2 elements with the same id #very-specific-design. Looks like you’ve misread what I said;

I imagine that you’ll be able to float 2 elements side-by-side within the #very-specific-design div

[slmille4]

What effect should that have, since the parent #scaleable-wrapper is acting as the container? Also the two elements have different ids (#very-specific-design1/#very-specific-design2) but the same class (.very-specific-design). In the actual use case there are two components that need to be scaled, so they need to have two different divs.

[Beverleyh]

What effect should that have, since the parent #scaleable-wrapper is acting as the container?

Because the #very-specific-design id is being used by the JS, so if you treat it like a wrapper and add your “twin” divs inside, they’ll scale proportionally together (in relation to each other – isn’t that what you want?) and you won’t have to worry about modifying the JavaScript, just the HTML and CSS.

In the actual use case there are two components that need to be scaled, so they need to have two different divs.

And there will be – it’s just that you need to create them and dress them up with your own CSS.

[slmille4]

Excellent, got it, thank you! One thing I’m confused about though, in the original with the Resizable component, the transform code was:

$el.css({
transform: “translate(-50%, -50%) ” + “scale(” + scale + “)”
});

while in order to get things to line up when it was just in a div, I needed:

$el.css({
transform: “translate(-50%, 0%) ” + “scale(” + scale + “)”
});

why was the change necessary?

source:
http://codepen.io/slmille4/pen/PzrQLv

[Beverleyh]

Because you’ve removed the explicit height from #scaleable-wrapper.

translate(-50%, -50%) is part of a vertical and horizontal centring technique that works in conjunction with top: 50%; left: 50%; on .very-specific-design. You can see that in Chris’ original demo.

In your modified demo, with the height gone from #scaleable-wrapper, top: 50%; on .very-specific-design becomes redundant. It will effectively default to top: 0;. The problem there is that translate(-50%, -50%) is still doing its thing on the horizontal and vertical, pulling it back half way along its width and height. You want it to do that on the X axis but not the Y axis, so, changing it to translate(-50%, 0) will only make the centering happen horizontally.

[Author]

Posts