Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Adam Smallman
Adam Smallman
4,182 Points
Posted by Adam Smallman
Adam Smallman
4,182 Points

How to code a 100% width website?

How would i design a 100% width website? I have tried all different grid systems with no luck.

There must be a simple way to achieve this.

Can any one help me?

Thanks very much

Andrew Ogryzek
Andrew Ogryzek
6,052 Points

Hi Adam,

You may wish to have a look at The Box Model http://teamtreehouse.com/library/websites/css-foundations-second-edition/the-box-model or even the whole CSS Foundations deep dive, which you may find helpful.

If I understand the question correctly, you may be having issues getting some elements to display the full width of the viewport.

If you have a div in the body of your HTML with a width of 100%, but the HTML body has a width of say 80%, for example. Then since the div is within the body, the width percentage is relative to its parent element. That is, 100% width for the div will be 80% of the body.

I hope that helps.

Cheers

4 Answers

Calvin Bramlett
Calvin Bramlett
13,748 Points
Calvin Bramlett
Calvin Bramlett
13,748 Points

CSS

.body, #header, #mainContainer, #footer{width:100%;}

HTML

<html>
<head>
</head>
<body>
<div id="header"></div>
<div id="mainContainer"></div>
<div id="footer"></div>
</body>
</html>
Adam Smallman
Adam Smallman
4,182 Points
Adam Smallman
Adam Smallman
4,182 Points

Thanks for the replies. The problem I'm having is all the content moves around on different screen resolution its very frustrating

Calvin Bramlett
Calvin Bramlett
13,748 Points

You really need to check out http://teamtreehouse.com/library/websites/css-foundations-second-edition/media-queries if you haven't yet. This is extremely helpful.

Andrew Ogryzek
Andrew Ogryzek
6,052 Points
Andrew Ogryzek
Andrew Ogryzek
6,052 Points

Hi Adam,

Coding for a consistent look across browsers and resolutions can be frustrating. It would be a lot easier if all devices used the same resolution(s) or standard(s). Anyway, having different stylesheets to deal with content layout for different resolutions seems to be the best way to deal with this issue at the moment.

Media Queries covers how to do this in more depth: http://teamtreehouse.com/library/websites/css3/media-queries 

<link rel="stylesheet" media="screen and (max width: 700px)" href="example.css" href="narrow-stylesheet.css">
<link rel="stylesheet" media="screen and (min-width: 701px) and (max-width: 900px)" href="medium-stylesheet.css">

As you can see in the above examples, you can serve up different stylesheets based on the min/max width of the screen.

I hope this helps!

Cheers,

Adam Smallman
Adam Smallman
4,182 Points
Adam Smallman
Adam Smallman
4,182 Points

Thanks very much for all of your help. So a have used the media-queries and it works fine, but when i tried it on my brothers big monitor its not wright. How do i get a website to look wright on a bigger monitor when i haven't got one to test it on?

Thanks for your help