I've been attempting to center align two divs and have them start at the same position using CSS.
Below is the inline CSS code. The first div is named container and the second div is named 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 you can apply 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>
Even after applying the styles to both divs, they are still not aligned to the center and do not start at the same position.
Remember to include the following in your CSS:
margin-left:auto; margin-right:auto;