Website layout "breaks apart" when zooming in or out in browsers + a few other basic css questions

Question

I'm pretty much as new to CSS as it gets and what I'm trying to do right now is just design a very simple/basic splash or landing page for a small business.

Here is the url for the site: My site

Now if you go on any browser, lets say google chrome and you zoom out or in (ctrl -/+) you will notice that the website layout starts to "break apart" in that all my divs just start shifting around. I obviously dont want this, and just want the site to remain the same when people zoom in or out, pretty much like all good sites haha.

I know it must have something to do with positioning, but I can't figure it our for the life or me. Last night I spent hours browsing similar questions but I can figure it out.

I'm not posting the code as to take up more space, I'm assuming since I gave you the URL you'll be able to retrieve the code from there.

I also have a few more, smaller questions:

1) if you open my site on chrome, or ie you'll notice that after the "terms and conditions" on the bottom of the page, the site ends, like it should. however, if you go on firefox, you'll notice that after the "terms and conditions" the background so to speak continues for a while. why is this and how can i fix it?

2) you'll notice that on different browsers positioning of elements is slightly different. most noticeably if you look or chrome/firefox and then internet explorer 9 you'll notice that the "terms and conditions" are slightly higher than in chrome or ff and thus slightly touching the main content area. is there a way to fix this?

3) what is an efficient, effective way to center divs? For example, I want to center the "sign up" button perfectly centered relative in the main content area. ive pretty much just been eyeing it out and using relative positioning to center it. what is a more accurate way to center it?

Thanks, and sorry if these questions seem a little redundant. if you need any clarification on anything I'll be monitoring this question like a hawk.

Cheers

Answer 1

1. When you zoom in or out, you will encounter issues because of rounding and text rendering. It is a good idea to make sure the layout can survive a bit of stretching without breaking down.

2. Relative positioning is affected by issues mentioned in #1, and therefore unreliable.

3. Look into using something to remove the properties that the various browsers will apply. You could use a reset to give you something more workable or try to normalize the values to make them more even between browers.

4. For (horizontal) centering you have some options:

   • If you have a container with "text-align:center" it will center all child elements that are inline-blocks or inline.
   • If you want to center a block element, you can use "margin: 0 auto" to center it horizontally and remove vertical margins.
   • If you want to center an absolutely positioned element, you can use "left: 50%, margin-left: -(width of element/2)".

In addition to attempting to get rid of relative positioning, I would recommend that you do not explicitly set the height of the body element. Generally you want the elements to manage their own size, that way they will be more robust.

If you use "position: relative" now because that is what you know how to use, I would suggest you try using "float: left" (or right), or changing the display type (display: inline-block). That may help you get started in the right direction.

Answer 2

not sure for your points 1 & 2, but as for 3 what i've come to use is the following have the div i want to center and then use width : some-percentage; margin-left : 100-(some_percentage)*0.5 ;, where some percentage is the width I want to use.