How to make your page resize with browser

Posted in Tutorials

Tweet This Share on Facebook Bookmark on Delicious Digg this Submit to Reddit

With responsive web design, the web page scales in proportion with the browser size.

If you are using pixel fixed width, when the browser window is smaller than the page design width, you get horizontal scroll bars.

By using percentages instead, your page will resize as your browser resizes.

Suppose you have an HTML structure such as …

We want our article to be on the left taking up two-thirds of the page. And the aside to be one-third on the right. Both are contained by our page represented by a div of id “wrapper” which we want to be 90% of the width of whatever our browser window happens to be.

So we would construct our CSS to be …

And this is how it looks in our browser ….

Note that our page is centered horizontally across our browser window with a 5% margin on left and right. That is because our page is 90% of browser width.

And if we resize our browser wider, our page resizes and the proportion of our article and aside remains the same.

Note that the column lengths are uneven due to uneven amounts of content. We will learn how to fix this with resizable faux columns in the next tutorial.