Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

Jared Halpert
Jared Halpert
2,412 Points

CSS positioning for different sized monitors

Hello Treehousers,

I am in need of some serious help. I cannot figure out the proper css to use to account for different sized monitors. I designed this website on a 13" monitor www.applespirate.com.

On a 13" monitor the positioning of elements is exactly how I want them at the moment. But on a 15" certain elements are distorted from the way I want. I originally used 'fixed' positioning, and px for dimensions. I redesigned the site using percentages. Still not working.

What is the best/proper method for positioning elements so that they will be consistent on all monitor sizes?? Also, when I use the 'center' html tag in attempt to make a group of elements centered, the positioning is distorted as well. Any help is greatly appreciated. Thank you.

13 Answers

James Barnett
James Barnett
39,199 Points

@Jared - I whipped together quick working example of how to keep content centered on the page even if the viewport changes.

The viewport is basically just a fancy term for the width & height of the browser window measured in pixels.

On Chrome my favorite way to see how a site will look with different viewport size is to use the Window Resizer extension. Install it on the computer with the 15" screen and then resize the Window and see how the browser reflows your page.

James Barnett
James Barnett
39,199 Points

You can learn about how to consistently position elements with CSS using the Learn Layout tutorial.

To follow up on what @Guil mention -

Use a 'container' div with a fixed width and set the margin to 'auto auto' which will center the container. Once you've done that, all your content will be inside the fixed width, centered, container and no matter the width of the browser windows, will always line up properly.

Jared Halpert
Jared Halpert
2,412 Points

You are an amazing human being @Mark. Thank you so much I really appreciate it. I was getting really frustrated with myself, and couldn't find anything on W3Schools or other related websites with a direct answer.

PS - you rock!

Guil Hernandez
STAFF
Guil Hernandez
Treehouse Teacher

Hi Jared,

I suggest you start with something like Normalize, so that everything renders consistently across all browsers.

The <center> tag has been deprecated for a while, so I do not recommend using it. I noticed that you're already using a #wrapper div, so like @Mark suggested, give it a width then set its margin value to 0 auto or auto.

I also noticed that you're positioning most of your elements with forced fixed and static positioning (they're static by default), then using percentages in your offset values – that's what's causing the inconsistencies. You should just be able to use the natural stacking order of the DOM to layout your elements, then maybe use percentages for your margins.

You can use text-align: center; to center-align everything in your #wrapper div.

Hope this helps :)

Jared Halpert
Jared Halpert
2,412 Points

Hey Guil,

Thanks so much for your help I really appreciate your expertise. Is this the best approach to fixing this mess?

  1. have 1 'container' div to keep browser consistency, set its margin to '0 auto'
  2. use 'fixed' positioning, and pixels instead of percentages to orient elements when designing original layout on a 13" monitor
  3. use % for margins of elements (if position is specifically desired)

Am I missing anything?

Jared Halpert
Jared Halpert
2,412 Points

@James thanks for the input I really appreciate the advice and clarity. I will definitely check out the layout tut.

James Barnett
James Barnett
39,199 Points

use 'fixed' positioning, and pixels instead of percentages to orient elements when designing original layout on a 13" monitor

Don't use fixed positioning, instead use default positioning type refered to as static

use % for margins of elements (if position is specifically desired)

Use percentages for margins of the container div to keep it centered on the page when viewing the site on larger screens.

James Barnett
James Barnett
39,199 Points

Regarding W3Schools, using that site as a reference is considered a worst practice. You can read more about this over at W3Fools

W3Schools is not affliated with the W3C in any way and are using it's trademark without it's permissions.

Instead you should be using:

Jared Halpert
Jared Halpert
2,412 Points

@James Thanks for the clarification on the positioning and use of percentages. Also, thanks for all the resources. I didn't know that about W3School. I feel completely duped and will never reference their site again. Good stuff to know. I don't know where my life would be heading without this forum.

Jared Halpert
Jared Halpert
2,412 Points

@James - wow thanks you didn't need to do that, but it's much appreciated. I'll definitely install the 'Window Resizer' extension, seems like a nifty tool to have in the toolbox. Thanks for all your insight James. It's amazing how helpful this community is. I'm a cs major, but we never go over any web dev stuff in the classroom, but I have been slowly trying to get into it. I'm still a noob so thanks a ton man.

James Barnett
James Barnett
39,199 Points

@Jared -

It took more time to write the forum post than to write to the codepen. Let us know if you have any more questions.

A great Treehouse course is the Build a Responsive Website which goes over how to convert the Smells Like Bakin' website to work look great on any sized screen.

I noticed in the "Box Model" section of Nick Pettit's "CSS Foundations " course that when he said the margin for his wrapper div, he set it as follows:

margin: 0 auto;

The zero seems unnecessary since the browsers will push it flush to the top of the page anyway. Is there a reason that I'm missing or is it just to show for possible future debugging that he purposefully wants it with no top margin?