CODEWITHSUNDEEP
csshtml
Vish
Vish

Reputation: 89

How to align 2 divs inside another div?

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><a href="#DisplayData" id="settings1" onclick="manage(this.id)">Manage</a></li>
         <li><a href="#DisplayData-2" id="settings2" onclick="manage(this.id)">Users</a></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>

Upvotes: 2

Views: 1725

Answers (4)

Mansoor Jafar
Mansoor Jafar

Reputation: 1488

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><a href="#DisplayData" id="settings1" onclick="manage(this.id)">Manage</a></li> <li><a href="#DisplayData-2" id="settings2" onclick="manage(this.id)">Users</a></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>

Upvotes: 0

Matt Tew
Matt Tew

Reputation: 1621

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><a href="#DisplayData" id="settings1" onclick="manage(this.id)">Manage</a></li>
         <li><a href="#DisplayData-2" id="settings2" onclick="manage(this.id)">Users</a></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>

Upvotes: 0

Roddy of the Frozen Peas
Roddy of the Frozen Peas

Reputation: 15219

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><a href="#DisplayData" id="settings1" onclick="manage(this.id)">Manage</a></li>
        <li><a href="#DisplayData-2" id="settings2" onclick="manage(this.id)">Users</a></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.

Upvotes: 0

SeanCannon
SeanCannon

Reputation: 78046

CSS: 

#accountstabs-1>div {
    float : left;
}

http://jsfiddle.net/T4E88/

Upvotes: 4

Related Questions