Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Stop div container from resizing

Tags:

html

css

resize

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

like image 282
A H Avatar asked Dec 09 '12 14:12

A H


1 Answers

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!

like image 98
Yann Chabot Avatar answered Sep 19 '22 15:09

Yann Chabot