Hide Page Elements Cleanly On Resize

I have a page with several arbitrarily-sized blocks of content. Is there a way I can:

1. Allow these blocks to resize larger or smaller to fill all available space as the window size changes,
2. Specify a minimum size for each of these blocks,
3. Hide the block completely when it will not fit on the 开发者_JS百科page at the specified minimum size.

I have full control over the HTML and CSS. I would strongly prefer a solution without Javascript.

---

@dark; may be you want a fluid website. So,

1) give width in percentage instead of px to the div for re size larger & smaller. check more http://www.smashingmagazine.com/2009/06/09/smart-fixes-for-fluid-layouts/

http://www.alistapart.com/articles/fluidgrids/

2) yes you can define min-width for your block like

.block{
 min-width:20%;
}

3) For hiding a block or change in design with certain window size you have to define min-width or max-width in media query. check the link

http://www.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/

http://www.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/

http://nathanstaines.com/demo/media-queries.html

http://css-tricks.com/css-media-queries/

---

For the 1st, you can set width and height with a % value. This will cause the "blocks" to resize as the "window size changes". For the 2nd, you can set the min-width and min-height, so that whatever the size of the window, the blocks will not shrink smaller then your specified values. As for the 3rd, you will have to use javascript.