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 i

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.