How to achieve multiple 100%-width rows?

Forum Moderators: open

Message Too Old, No Replies

How to achieve multiple 100%-width rows?

Megalith

4:33 pm on Feb 19, 2013 (gmt 0)

Hey, all. I'm trying to figure out the easiest way to show multiple rows of content that take up the entire width of the viewport.

The look I'm after is what Microsoft did with surface.com; there are tall rows of content with individual columns inside, each with a different background color.

swa66

9:42 pm on Feb 19, 2013 (gmt 0)

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.

Megalith

12:06 am on Feb 20, 2013 (gmt 0)

Thanks, I'll try out what you said, though the responsive design is intriguing. I stumbled upon a responsive framework, Foundation, which might help in recreating this.