Adaptive Layouts in CSS3

Question

I am trying to convert my website index page to be adjustable. I want the whole conent of the page to be adjustable. By adjustable I mean if some one opens the page in a new window and try to resize the window by dragging it with mouse, the content of my page also adjust itself according to the width and height of the window.

Is it possible using only CSS or I have to use some javascript as well?

What I need is something like [this][1]

Any help or advice will be highly appriciated

Thanks

Answer 1

What you want to do is to Responsive Design

For example you can make your css target a particular devise as:

//General css 


/*MEDIA BETWEEN 300 - 1000PX */ 
@media all and (min-width:300px) and (max-width:1000px)
{


}

/*MEDIA BETWEEN 621 - 800PX */ 
@media all and (min-width:621px) and (max-width:800px)
{

}

/*MEDIA BETWEEN 300 - 620PX */ 
@media all and (min-width:300px) and (max-width:620px)
{

}

Some of the pages that can help are:

1. http://googlewebmastercentral.blogspot.in/2012/04/responsive-design-harnessing-power-of.html
2. http://www.onextrapixel.com/2012/04/23/responsive-web-design-layouts-and-media-queries/

NOTE: use em and % instead of px and pt

Answer 2

Just set relative widths on stuff, like width: 75%; or width: 60%; instead of width: 450px; or width: 650px;. This will work for you if you just need elements to get narrower/wider as the page is resized.
If you want major layout changes (like on the demo you provided, the top menu bar becomes a sidebar when the window becomes smaller), you'll need some Javascript to switch stylesheets based on the width of the window. Hope this gives you some ideas!

Answer 3

What you are talking about is called "Responsive Design". A responsive site works more with percentages instead of pixels as well as something called "media-queries" in css.

There is a great article about it here: http://www.alistapart.com/articles/responsive-web-design/