CODEWITHSUNDEEP
htmlcss
Pomster
Pomster

Reputation: 15207

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

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.

Upvotes: 0

Views: 5555

Answers (5)

Dhaval Marthak
Dhaval Marthak

Reputation: 17366

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 :)

Upvotes: 1

user2211216
user2211216

Reputation: 375

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>

Upvotes: 1

Mihey Egoroff
Mihey Egoroff

Reputation: 1542

Use display: inline-block;
DEMO

Upvotes: 0

Anup
Anup

Reputation: 9746

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>

Upvotes: 0

Vinay
Vinay

Reputation: 325

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>

Upvotes: 3

Related Questions