Question

I have two columns in an html page, one is floated right and the other is floated left.
I have set the height of both containers to 100% and the width of both containers to 50%. I want the two containers to fit the entre window. When the user re-sizes the window horizontally I don’t want the content to resize. How can i achieve this?

Thanks

Answer 1

There is many way to achieve that. First of all, the easiest would be to put the css value min-width! So if you want it to resize but to stop at 960px (for example) you just have to do :

    myCoolDiv{
         width: 100%;
         height: 50%;
         min-width: 960px;
   }

That would give you the best result. Else, if you dont want content to resize at all, and the selector to have a width equal to 100% of the initial screen, I would use jQuery that way:

    $(document).ready(function() {
       //Call a variable to know the width of the window
       var screenWidth = $(window).width();
       $('myCoolDiv').css('width', screenWidth + 'px');
    });

Hope it helped! Tell me if my answer is not clear enough or if you don’t understand a part of it!

Cheers!