CSS positioning for different sized monitors

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

To follow up on what @Guil mention -

• Use margin: auto; to align block-level elements
• text-align:center; to align text and inline-level elements

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.

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!

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 :)

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?

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

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.

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:

• Sitepoint Reference
• Mozilla Development Network

@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.

@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.

@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?