How to align two <div> tags horizontally in the same line inside a main <div> tag?

user_2862233 0
Viewed 59183

I am trying to use two <div> elements inside a main <div>. But the problem is, in the first <div> I am using an <image> control and along with it I am fetching some text data from the database. And in second <div> I am using a <gridview>. But I am unable to show these two <div> elements in same line horizontally.

I have tried doing this:

<div style="width:1000px;overflow:hidden; height:auto; float:left; text-align:justify; margin-bottom:15px;">
    <div id="right part" runat="server" style="width:auto; float:left; margin:0 12px 12px 0;">
        <asp:Image ID="Image1" runat="server" Height="122px" Width="148px" /><% =details %></div>
    <div id="left part" runat="server" style="float:left;width:auto;display:inline-block;">
        <asp:GridView ID="GridView1" runat="server" ShowHeader="False" 
                      ForeColor="Black" GridLines="None" EnableModelValidation="True" 
                      onpageindexchanging="GridView1_PageIndexChanging" onrowcreated="GridView1_RowCreated">
        </asp:GridView>    
    </div>
</div>

Please suggest me if I am doing something wrong?

css html
4 Answers

Here's a simple way to get right and left justified text on the same line.

CSS

.alignleft {
    float: left;
}
.alignright {
    float: right;
}

HTML

<div id="textbox">
  <p class="alignleft">Text on the left.</p>
  <p class="alignright">Text on the right.</p>
</div>
user_83679430
Related