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

score 1 · Accepted Answer · edited Sep 19 '12 at 14:03

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:

NOTE: use em and % instead of px and pt

score 0 · Answer 2 · answered Sep 19 '12 at 10:53

0

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!

answered Sep 19 '12 at 10:53

Abraham

20,316
7
33
39

OK, so if you just want elements getting smaller or larger when the page is resized, just set percent widths. – Abraham Sep 19 '12 at 10:56
I tried it I gave width:59% to my main div inside which everything else lies but it didn' work :( – Wearybands Sep 19 '12 at 11:04
let me provide you some css and my page – Wearybands Sep 19 '12 at 11:10
when I resize my window the content of main div does not resize itself according to the size of window i want it to resize itself – Wearybands Sep 19 '12 at 11:18
Make sure the parent elements of `#mainContainer` such as the body and html tags don't have a fixed width set. – Abraham Sep 19 '12 at 11:24

score 0 · Answer 3 · answered Sep 19 '12 at 10:55

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/

Adaptive Layouts in CSS3

3 Answers3

Linked