Why would Arial be placed before Helvetica when using font-family in CSS?

Trouble with CSS –building 1st website ever-Containers move depending on screen-size?

• Hello there, I just posted a question but it was getting messy full of scripts. SO- for convenience, here it is again, but hopefully better organized with all information one may need to review our situation. We are currently building a website using CSS and are nearing done... or so we thought. Upon opening the pages on a different size computer with a larger screen, the "Containers" were no longer centered. This made us aware (think goodness) that we cannot launch it yet and that we clearly did not use correct scripting so that our page will open the same on all types of computers and different size screens. The background still fills the screen, but our main two containers on a large screen is now closer to the right side whereas before it was centered. Below is what the CSS currently looks like for the containers. Does anyone see the problem in my CSS as to why it is doing this, and know what I must do to rectify this and make it compliant on most all computers. Thank you. body { font-family: Verdana, Helvetica, Ariel, sans-serif; background-color: #FFF330; padding: 0px; border:none; background-image:url(cheetah.jpg); min-width:670px; padding: 10px 0; width: 100px; } .container { width: 970px; margin: 0 auto; overflow: hidden; } #top-container {position: relative; width: 700px; border: none; background-color: #FFF330; padding: 5px; float:middle; left: 150px; height: 300 px; margin-bottom: 60px; top: 10px; border:5px outset #CC6600; } #container {position: relative; width: 700px; border: none; background-color: #FFF330; padding: 5px; float:middle; left: 150px; padding-top: 10px; border:3px outset #CC6600; } #TheLogo { position:relative; left: 215px; }

• Answer:

  Not enough info to test it but I see a couple of errors. margin: 0 auto; may not work in some browsers to center the container. The traditional work around is to make the body tag have text-align center then your container text-align left. padding and border attributes are used twice in same id or class. min-width:670px; // only applies to non MSIE browsers body width: 100px; // do you mean 100%? or 1000px; #top-container & #container - no such attribute as float "middle". Since you are using position relative stick with top bottom left or right.