How do I make my website’s layout work gracefully with different browser window sizes, like Tumblr does?

i start to study asp.Net now, i understand basic html (css not) i need your help how to create my website fit with web browser,

like this :

when i resize first

and last

i try create with my own skill and my website 开发者_开发问答in a mess

---

It's called an adaptive layout technique but more recently coined responsive web design (both great articles). A gallery of websites that employ this technique can be found at mediaqueri.es.

The guts of it is based around using CSS to style your website for the default "wide view" then using @media CSS queries to apply extra CSS rules for specific screen dimensions. For example:

body { color:red; }

@media screen and (max-width: 800px) {
    body { color:green; }
}

@media screen and (max-width: 650px) {
    body { color:blue; }
}

Demo: jsfiddle.net/6LX9n (resize width of window to see in action)