Question

I have a set of elements and require that their minimum width be equal to their height, but the height is not explicitly set. Currently I am able to achieve this by setting the css min-width property via jQuery:

$(document).ready
(
    function()
    {
        $('.myClass').each
         (
             function() {$(this).css('min-width', $(this).css('height'));}
         );
    }
);  

Is it possible to specify this behaviour directly in the css?

Here is a jsfiddle demonstrating what I am trying to achieve: http://jsfiddle.net/p8PeW/

Answer 1

I don’t believe this is possible without JS, but maybe someone can prove me wrong?

CSS doesn’t allow you to use dynamic variables, so if the height isn’t set until the page loads, I’m not sure how this could be done.