prevent html elements from squishing when resolution too small

I see websites like Amazon and Google when you shrink the width of the web browser the elements only squish to a certain point and then it stop开发者_如何转开发s squishing even if you shrink the width even more.

What kind of techniques would allow this? Is there a specific CSS attribute that can enable this?

You're probably seeing the min-width and min-height styles in action.

eg:

.myclass {
    width: 50%;
    min-width:100px;
}

...will take up 50% of the container object, so can be resized, but will never get smaller than 100px wide.

min-height works in much the same way.

Note that if you need to support IE6, this browser doesn't support min-height or min-width. (there are work-arounds for this, but the best solution is not to support IE6)

The CSS min_width property.

#header {
  background: url(../images/image.jpg) repeat-x;
  min-width: 960px;
}

Hope this helps

They use the min-width and min-height css properties.

For example, to make a content div (or with HTML 5 a content tag) stop shrinking when its 300px wide, use the following css code:

div#content {
    min-width: 300px;
}

You can still use this method with a percentage or em based layout- just use it to prevent the page from becoming to small:

div#content {
    width: 70%;
    min-width: 300px;
}

Note: The min-width property does not include padding, borders, or margins when it calculates when to kick in (it only considers the container's width).