Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Min width in window resizing

I have a webpage with a fluid layout with a 100% width.

When I resize browser window the elements in the page overlap.

I would create an effect similar to this website http://bologna.bakeca.it/ that when window is smaller than a fixed width stop resizing.

like image 653
pAkY88 Avatar asked Sep 27 '10 09:09

pAkY88


People also ask

What does Min-width 100% do?

min-width:100% makes sure the element is at least as wide as its container. width: auto allows the element to keep its original size.

Does Min-width override width?

The min-width property in CSS is used to set the minimum width of a specified element. The min-width property always overrides the width property whether followed before or after width in your declaration.

What is the difference between min-width and width?

The width declaration will be set 90% of whatever it's container width is. The min-width makes it so that element has to be at least 600px wide. Thanks.

What min-width means?

Definition and Usage The min-width property defines the minimum width of an element. If the content is smaller than the minimum width, the minimum width will be applied. If the content is larger than the minimum width, the min-width property has no effect.


1 Answers

You can set min-width property of CSS for body tag. Since this property is not supported by IE6, you can write like:

body{    min-width:1000px;        /* Suppose you want minimum width of 1000px */    width: auto !important;  /* Firefox will set width as auto */    width:1000px;            /* As IE6 ignores !important it will set width as 1000px; */ } 

Or:

body{    min-width:1000px; // Suppose you want minimum width of 1000px    _width: expression( document.body.clientWidth > 1000 ? "1000px" : "auto" ); /* sets max-width for IE6 */ } 
like image 138
Chinmayee G Avatar answered Sep 21 '22 13:09

Chinmayee G