html - trying to align two divs to the center to begin at thesame position -

i trying align 2 divs center , begin @ same position using css

this inline style css code. name of first div container , name of second div descriptionarea

#container {             width: 60%;             height: auto;             margin-left:auto;             margin-right:auto;         }          .inner-container {             min-height: 400px;             display: inline-block;             overflow-y: auto;             border: 4px solid black;             margin-left:auto;             margin-right:auto;         }          #chats-container {             height: 70%;             width: 60%;             padding-top:5px;             padding-left:5px;         }          #users-container {             height: 70%;             width: 22%;             padding-top:5px;             padding-left:5px;         }          input[type=submit] {         border: 1px solid #f44c0e;         color: #fff;         background: tomato;         padding: 10px 20px;         border-radius: 3px;         }         input[type=submit]:hover {             background: #f44c0e;         }          textarea {          width: 550px;          height: 60px;          font: normal 14px verdana;          line-height: 30px;          padding: 2px 10px;          border: solid 1px #ddd;         margin-left: auto;         margin-right: auto;         }           .descriptionarea {        min-width: 490px;        position: relative;        display: inline-block;         margin-left: auto;         margin-right: auto;         }      .descriptionarea textarea{     width: 490px;     height: 20px;     height: 60px;     font: normal 14px verdana;      }      .descriptionarea span.namefortxtarea{         display: block;         text-align: left;         font-size:12px;     }      .descriptionarea span.buttonfortxtarea{         display: block;         text-align: right;     } 

this how calling/applying 2 divs in html format first div

<div id="container">     <div id="chats-container" class="inner-container">     </div>    <div id="users-container" class="inner-container">      </div> </div> 

second div

<div class="descriptionarea">     <textarea id="new-chat-input" ></textarea>     <span class="buttonfortxtarea">     <button class= "btn btn-mini description_submit" id="new-chat-button">submit</button></span>     </div> 

i have tried applying both divs still 2 divs not aligned center , not beginning same position.

margin-left:auto; margin-right:auto;

if remove id attribute div#container , replace within .descriptionarea class , wrap both divs parent div#container divs line in center.

<div id="container"> <div class="descriptionarea">     <div id="chats-container" class="inner-container"></div>     <div id="users-container" class="inner-container"></div> </div> <div class="descriptionarea">     <textarea id="new-chat-input" ></textarea>     <span class="buttonfortxtarea">              <button class="btn btn-mini description_submit" id="new-chat-button">submit</button>     </span> </div> </div>