How to align two div's next to each other?

Question

I have two field set that i would like to display next to one another :

enter image description here

I have managed to get it the correct distance i want from one another but have not been able to lineup there height.

Below is the html i have used.

<div style="width:900px; height:230px;">
  <fieldset style="width:150px;">
    <legend>Facilities Required</legend>
    <asp:CheckBox ID="PhysicalMailbox" runat="server" Text="Physical Mailbox" /><br>
    <asp:CheckBox ID="Uniform" runat="server" Text="Uniform"/><br>
    <asp:CheckBox ID="Desk" runat="server" Text="Desk"/><br>
    <asp:CheckBox ID="Stationary" runat="server" Text="Stationary"/>
  </fieldset>
  <div style="width:50%; top:0px">
    <fieldset style="width:229px; left:151px; float:right; top:0px;" >
      <legend>Access Required</legend>
      <asp:CheckBox ID="AccessTag" runat="server" Text="Access Tag" /><br><br>
      <asp:Label ID="lblProfile" enableviewstate="false" runat="server" AssociatedControlID="ddProfile" CssClass="FormLabel">Profile</asp:Label>
      <ICCM:ICCMDropDownList ID="ddProfile" runat="server" TabIndex="10" style="width:233px;" AppendDataBoundItems="true"  >   
        <Items>
          <asp:ListItem Value="" Text="" Selected="True" />    
        </Items>                                                                                                    
      </ICCM:ICCMDropDownList>
   </fieldset>
  </div>
</div>

Thanks in advance.

It's pretty easy @Pomster,Stackoverflow has so many question and answers about this task.dont have time to do web search?? http://stackoverflow.com/questions/2716955/css-layout-aligning-two-divs-side-by-side and http://stackoverflow.com/questions/4460990/align-2-divs-side-by-side — shankar.parshimoni, Jan 23 '14 at 12:48

score 3 · Accepted Answer · answered Jan 23 '14 at 12:38

I understand that you should create a new div which will be the container of rest two DIVs. The apply style "float: left" on inner DIVs. Have a look code below, this is working as you are expecting:

    <div style="width:900px">
        <div style="width:50%; height:230px; float:left;">
          <fieldset style="width:150px;">
            <legend>Facilities Required</legend>
            <asp:CheckBox ID="PhysicalMailbox" runat="server" Text="Physical Mailbox" /><br>
            <asp:CheckBox ID="Uniform" runat="server" Text="Uniform"/><br>
            <asp:CheckBox ID="Desk" runat="server" Text="Desk"/><br>
            <asp:CheckBox ID="Stationary" runat="server" Text="Stationary"/>
          </fieldset>
          </div>
          <div style="width:50%; top:0px;float:left;">
            <fieldset style="width:229px; left:151px; float:right; top:0px;" >
              <legend>Access Required</legend>
              <asp:CheckBox ID="AccessTag" runat="server" Text="Access Tag" /><br><br>
              <asp:Label ID="lblProfile" enableviewstate="false" runat="server" AssociatedControlID="ddProfile" CssClass="FormLabel">Profile</asp:Label>
              <ICCM:ICCMDropDownList ID="ddProfile" runat="server" TabIndex="10" style="width:233px;" AppendDataBoundItems="true"  >   
                <Items>
                  <asp:ListItem Value="" Text="" Selected="True" />    
                </Items>                                                                                                    
              </ICCM:ICCMDropDownList>
           </fieldset>
        </div>
    </div>

Yes, this will work as container and their float property will on the basis on parent container. Also, you missed one close div tag after first fieldset. — Vinay, Jan 23 '14 at 12:44

user2211216 · Answer 2 · 2014-01-23T12:42:23.013

1

set them to:

  style="display:inline-block;"

correct whole code:

<div style="width:900px; height:230px;">
    <div style=" top:0px; display:inline-block;">
    <fieldset style="width:150px;">

    </fieldset>
    </div>
  <div style=" top:0px; display:inline-block;">
    <fieldset style="width:229px; left:151px; float:right; top:0px;" >

   </fieldset>
  </div>
</div>

edited Jan 23 '14 at 12:42

answered Jan 23 '14 at 12:31

user2211216

375
2
8

The div or the fieldset?? – Pomster Jan 23 '14 at 12:35
the correct thing to do, is to put the fieldsets inside 2 divs with style="display:inline-block;" and specify their width. so in your case: one big container div, and 2 small divs inside and inside those 2 divs you pu the fieldsets – user2211216 Jan 23 '14 at 12:37

Dhaval Marthak · Answer 3 · 2014-01-23T12:42:51.290

You can wrap first <fieldset> into a <div/> and set it float:left

Give float:left to that <div>

first fieldset

<div style="float:left;"> 
  <fieldset>...</fieldset>
</div>

Note: You forgot to close main </div>, Consider both divs one is float:left and another is float:right remove float from fieldset.

Fiddle DEMO

Another way is using display properties:

You can set display:inline-block to both the divs containing fieldset, you might have to consider vertical-alignment :)

score 0 · Answer 4 · answered Jan 23 '14 at 12:39

0

Demo

Go for 2 div's like this :-

<div style="width:150px; height:230px;">Fieldset 1</div>
<div style="width: auto; height:230px;">Fieldset 2</div>

answered Jan 23 '14 at 12:39

Anup

9,396
16
74
138

score 0 · Answer 5 · answered Jan 23 '14 at 12:42

0

Use display: inline-block;
DEMO

answered Jan 23 '14 at 12:42

Mihey Egoroff

1,542
14
23

How to align two div's next to each other?

5 Answers5