homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

How to achieve multiple 100%-width rows?

5+ Year Member

Msg#: 4546799 posted 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.



WebmasterWorld Senior Member swa66 us a WebmasterWorld Top Contributor of All Time 10+ Year Member

Msg#: 4546799 posted 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.


5+ Year Member

Msg#: 4546799 posted 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.

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / HTML
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved