FWIW: the microsoft site you reference uses responsive design methods to change the way it looks depending on viewport width. E.g. Try making it really narrow and the entire look changes. But it also resized images based on viewports etc - easy enough to do - but there are consequences - ironically mostly only for those using browsers made by Microsoft (IE).
Assuming you're after what the site does on typical desktop use, it's all just rather basic CSS.
The width is not really a problem: the width of the viewport is taken by the <html> element and from there you can just use 100% to reference it in children.
So next you need elements that form rows: any block element that can contain children will do.
The top bar that stays put is simple as well: it's position: fixed in CSS and it'll not scroll along.
To create columns inside a "row" you can use a percentage fo the width of the parent and position ti all like you want.
There's little extraordinary stuff needed as long as you don't try to replicate their shadows (they are a bit harder to achieve just like that.) Actually it looks that Microsoft had trouble too: the shadows are in fact content images - not real CSS shadows nor a CSS "trick".
Ironic to see Microsoft made stuff that's using modernizer.