How to align 2 divs inside another div? - css

Question

My requirement is I have two links at left side and if I click on a link, respective page should get displayed on the right side.
how can make this arrangement using tags.
I tried as the below, but its not showing side by side. where as DisplayData gets appeared at the bottom of links. Thanks in advance..
<div id="accountstabs-1">
<div id="links" style="text-align:left">
<li>Manage</li>
<li>Users</li>
</div>
<div id="DisplayData" style="text-align:right">
<table class="data">
<thead>
<tr>
<th>
First Name
</th>
<th>
Last Name
</th>
</tr>
</thead>
</table>
</div>
</div>

Answer 1

CSS:
#accountstabs-1>div {
float : left;
}
http://jsfiddle.net/T4E88/

Answer 2

You need to use floats instead of text-align to position elements. (text-align should only be used for text.)
Check out this JSFiddle example.
I updated your HTML like this:
<div id="accountstabs-1">
<div id="links" >
<li>Manage</li>
<li>Users</li>
</div>
<div id="DisplayData" >
<table class="data">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
</table>
</div>
<div class="clr"></div>
</div>​
Notice that I removed the two text-align inline styles from the divs, and added the new div near the bottom with class clr.
Then the CSS looks like this:
#links {
width: 50%;
float: left;
}
#DisplayData {
width: 50%;
float: right;
}
/* clearfix */
.clr { clear: both; }
The purpose of the "clearfix" is to make sure that any elements added after your right column get displayed underneath the columns properly.

Answer 3

You should put the styles in a separate CSS file, but the following should work;
<div id="accountstabs-1" style="width:400px">
<div id="links" style="display:block;float:left;width:200px">
<li>Manage</li>
<li>Users</li>
</div>
<div id="DisplayData" style="display:block;float:right;width:200px">
<table class="data">
<thead>
<tr>
<th>
First Name
</th>
<th>
Last Name
</th>
</tr>
</thead>
</table>
</div>
</div>

Answer 4

div is a block element and it take the whole place horizantly,
to place another div in parallel you need to use css property float left .
use style property style="float:left".
<div id="accountstabs-1">
<div id="links" style="text-align:left; float:left">
<li>Manage</li>
<li>Users</li>
</div>
<div id="DisplayData" style="text-align:right">
<table class="data">
<thead>
<tr>
<th>
First Name
</th>
<th>
Last Name
</th>
</tr>
</thead>
</table>
</div>
</div>