View disrupts on Window resize

Question

I've created a page using squares. The squares combine to make a particular word. But when I resize the window, the squares disrupt their place in a haphazard way. How I can change my CSS or javascript so that the squares retain their original positions on window resize?

You can view the page at : http://www.tryst-iitd.com/13/beta

I've included the following code to take care of the resizing, still the problem remains unsolved.

<script type="text/javascript">
$(function () {
    var screenWidth = $(window).width() + "px";
    var screenHeight = $(window).height() + "px";
    $("#container").css({
        width: screenWidth,
        height:screenHeight,
    });
    $(window).resize( function () {
        var screenWidth = $(window).width() + "px";
        var screenHeight = $(window).height() + "px";
        $("#container").css({
            width: screenWidth,
            height:screenHeight,
        });
    });
});
</script>

Answer 1

The square is disrupted because the width of the container is adjusted automatically whenever you resize your window. Set a fix value or set a minimum width for the square and container should fix the problem. The square width is in %.

Also, the window resize event itself is useless because the div (id=container) is adjusted according to the width of the body tag

Answer 2

Set the position and size of your squares in percentages and your resize code will works fine.

Also, set the min-width / min-height CSS properties will prevent your squares from being too small.

Answer 3

Your problem is that your css margins are fixed width, so even if squares width are in %, margins causes this issues. As an example, try disabling wrap1 and wrapalphabet css classes, you will see that your design will be much more responsive.

You probably have to rethink the way you deal with margin/padding to get the results you expect.