Andrea Robinson Andrea Robinson - 4 months ago 11
CSS Question

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

I am trying to align two divs to the center and to begin at the same position using css

this is the inline style css code. The name of the first div is container and the name of the 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 is how I am calling/applying the two 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 to both divs but still the two divs is not aligned to the center and not beginning to the same position.

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

Answer

If you remove the id attribute for div#container and replace it within .descriptionarea class and you wrap both divs with a parent div#container your divs will line up in the 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>
Comments