HTML/CSS HELP!

[romnag]

Hello,I'm doing a website (battlefield 3 fansite). I got a problem. I would like to have server 1 and server 2 boxes on the same line and in center as Maintenance box. What do I do wrong? HTML CODE - a part of it.

<div id="news-container-1">  <h1>Maintenance</h1>  <h2>We are opening this site very soon!</h2></div><div id="server-container">  <div id="server-box">	<h1>SERVER 1</h1>	<h2 style="color:#900">OFFLINE</h2>  </div>  <div id="server-box">	<h1>SERVER 2</h1>	<h2 style="color:#900">OFFLINE</h2>  </div></div>

CSS CODE - a part of it

#server-box, #server-box-2 {  background-image: url(../img/backgr.jpg);  background-position: center 0;  background-repeat: no-repeat;  text-align: center;  height: auto;  width: 235px; /*260px*/  padding: 15pt;  margin: auto;  margin-top: 10pt;  box-shadow: 0pt 0pt 10px rgb(0, 0, 0);}#server-box-2 {  margin-left: 90pt;}#server-container {}#news-container-1, #news-container-2 {  background-image: url(../img/backgr.jpg);  background-position: center 0;  background-repeat: no-repeat;  height: auto;  width: 490px; /*260px*/  padding: 15pt;  margin: auto;  margin-top: 90pt;  box-shadow: 0pt 0pt 10px rgb(0, 0, 0);}#news-container-2 {  margin-top: 10pt;}#footer_2 {  position: static;  margin-top: 10pt;  text-align: center;}h1 {  font: bold 35px/36px 'purista-web',Arial,sans-serif;  color: rgb(248, 134, 19);  padding: 0pt;  text-transform: uppercase;  text-shadow: 0pt 0pt 10px rgb(0, 0, 0);  margin: 0px;}h2 {  font: bold 24px/26px 'purista-web',Arial,sans-serif;  color: rgb(255, 255, 255);  padding: 0pt;  text-transform: uppercase;  text-shadow: 0pt 0pt 10px rgb(0, 0, 0);  margin: 0px;}h3 {  font: bold 14px/16px 'purista-web',Arial,sans-serif;  color: rgb(255, 255, 255);  padding: 0pt;  text-transform: uppercase;  text-shadow: 0pt 0pt 10px rgb(0, 0, 0);  margin: 0px;}h4 {  font: bold 11px/12px 'purista-web',Arial,sans-serif;  color: rgb(255, 255, 255);  padding: 0pt;  text-transform: uppercase;  text-shadow: 0pt 0pt 10px rgb(0, 0, 0);  margin: 0px;}

[tnd1000]

So let me make sure I've got this right: you want the Maintenance box betweenthe two server boxes? The first problem I saw is that you don't give your server-boxes unique IDs

<div id="server-box">        <h1>SERVER 1</h1>        <h2 style="color:#900">OFFLINE</h2>  </div>  <div id="server-box">        <h1>SERVER 2</h1>        <h2 style="color:#900">OFFLINE</h2>  </div> 

You need to name the second server-box div "server-box-2", because you have it named that in the CSS sheet, and also so the code won't get confused by having two divs with the same ID. Also, I'm pretty sure you can't call to one attribute twice in a style sheet

#server-box, #server-box-2 {  background-image: url(../img/backgr.jpg);  background-position: center 0;  background-repeat: no-repeat;  text-align: center;  height: auto;  width: 235px; /*260px*/  padding: 15pt;  margin: auto;  margin-top: 10pt;  box-shadow: 0pt 0pt 10px rgb(0, 0, 0);}#server-box-2 {  margin-left: 90pt;}

If you're going to have differences in the styles, even if its just one, I would recommend just copying the values from server-box and copying them to server-box-2 in addition to that "margin-left" value. It could come out looking something like this:

#server-box {  background-image: url(../img/backgr.jpg);  background-position: center 0;  background-repeat: no-repeat;  text-align: center;  height: auto;  width: 235px; /*260px*/  padding: 15pt;  margin: auto;  margin-top: 10pt;  box-shadow: 0pt 0pt 10px rgb(0, 0, 0);}#server-box-2 {  margin-left: 90pt;  background-image: url(../img/backgr.jpg);  background-position: center 0;  background-repeat: no-repeat;  text-align: center;  height: auto;  width: 235px; /*260px*/  padding: 15pt;  margin: auto;  margin-top: 10pt;  box-shadow: 0pt 0pt 10px rgb(0, 0, 0);}

Also, I don't know that the "margin: auto" part is going to do anything, as you already use "margin-top" and "margin-left". "margin" by itself generally changes the margins of the whole object. Now, as far as getting the server-boxes on the same line, I would recommend trying "float: left" for both of them. It may take some tweaking to get the exact results you're looking for, though. Since I'm not entirely sure what you want to do with the Maintenance box, I can't help much with that.