How to align two tags horizontally in the same line inside a main tag? [duplicate]





.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}







3
















This question already has an answer here:




  • How can I align two divs horizontally? [duplicate]

    10 answers




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?










share|improve this question















marked as duplicate by TylerH css
Users with the  css badge can single-handedly close css questions as duplicates and reopen them as needed.

StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;

$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');

$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Feb 20 at 16:46


This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.



















  • Try changing the width:auto to width:50%;

    – Dan Goodspeed
    Dec 27 '13 at 7:25











  • set float:right; to the second div

    – Pranav C Balan
    Dec 27 '13 at 7:25




















3
















This question already has an answer here:




  • How can I align two divs horizontally? [duplicate]

    10 answers




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?










share|improve this question















marked as duplicate by TylerH css
Users with the  css badge can single-handedly close css questions as duplicates and reopen them as needed.

StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;

$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');

$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Feb 20 at 16:46


This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.



















  • Try changing the width:auto to width:50%;

    – Dan Goodspeed
    Dec 27 '13 at 7:25











  • set float:right; to the second div

    – Pranav C Balan
    Dec 27 '13 at 7:25
















3












3








3


3







This question already has an answer here:




  • How can I align two divs horizontally? [duplicate]

    10 answers




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?










share|improve this question

















This question already has an answer here:




  • How can I align two divs horizontally? [duplicate]

    10 answers




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?





This question already has an answer here:




  • How can I align two divs horizontally? [duplicate]

    10 answers








html css






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Dec 27 '13 at 7:37









Alexander van Oostenrijk

1,8831124




1,8831124










asked Dec 27 '13 at 7:21









OmiOmi

17641536




17641536




marked as duplicate by TylerH css
Users with the  css badge can single-handedly close css questions as duplicates and reopen them as needed.

StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;

$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');

$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Feb 20 at 16:46


This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.









marked as duplicate by TylerH css
Users with the  css badge can single-handedly close css questions as duplicates and reopen them as needed.

StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;

$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');

$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Feb 20 at 16:46


This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.















  • Try changing the width:auto to width:50%;

    – Dan Goodspeed
    Dec 27 '13 at 7:25











  • set float:right; to the second div

    – Pranav C Balan
    Dec 27 '13 at 7:25





















  • Try changing the width:auto to width:50%;

    – Dan Goodspeed
    Dec 27 '13 at 7:25











  • set float:right; to the second div

    – Pranav C Balan
    Dec 27 '13 at 7:25



















Try changing the width:auto to width:50%;

– Dan Goodspeed
Dec 27 '13 at 7:25





Try changing the width:auto to width:50%;

– Dan Goodspeed
Dec 27 '13 at 7:25













set float:right; to the second div

– Pranav C Balan
Dec 27 '13 at 7:25







set float:right; to the second div

– Pranav C Balan
Dec 27 '13 at 7:25














4 Answers
4






active

oldest

votes


















5














css




display:inline-block




add div right part and left part css






share|improve this answer



















  • 1





    Can you fiddle it?

    – a coder
    Jan 12 '15 at 22:53



















2














Set 'right part' div float to right. Please check, you are using space in id selectors which is not right.






share|improve this answer

































    0














    Your code should align the divs in one line... see here



    width:auto; float:left; will only take the content width as div width, so it will always be inline as long as the total width < 1000px.



    A simpler suggestion would be to use percentage for widths, this way you don't need to inline display the.



    Also, idv # and . do not contan names with space, they are supposed to be one single word (notice the change i made to your id names)



    demo



    html, body {
    width:100%;
    height:100%;
    }
    #main {
    width:100%;
    height:100%;
    float:left;
    text-align:justify;
    margin-bottom:15px;
    }
    #right_part {
    width:49%;
    float:left;
    border:1px solid #000;
    }
    #left_part {
    border:1px solid #000;
    float:left;
    width:49%;
    display:inline-block;
    }





    share|improve this answer
























    • Hi @NoobEditor, Yes that is why I am confused about this issue.Actually there is one more problem, I am keeping the Image and the details which I am fetching from DB in one div and the gridview is in 2nd div. But in most of the cases the details which I am fetching doesn't display on the page. whereas gridview is displayed.

      – Omi
      Dec 27 '13 at 9:38













    • Width of the main div is 1000px, and I have kept these two div's inside the parent div. I guess now the problem is with the width of the two div's.I have also tried width=auto; option, but in that case alignment of these two div's get's effected.

      – Omi
      Dec 27 '13 at 9:44











    • if the number of width is fixed( if they are only 2), then assign width:500px to both the child divs, that would help them, see here jsfiddle.net/9a3tH/6/ ...also it not width=auto but width:auto

      – NoobEditor
      Dec 27 '13 at 10:10











    • @user2862233 : as for your image and data...m not mch of asp guy...you have to check 1st if the data is coming on the page or not...look through the page source and see if required data is there or not!

      – NoobEditor
      Dec 27 '13 at 10:11



















    0














    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>





    share|improve this answer






























      4 Answers
      4






      active

      oldest

      votes








      4 Answers
      4






      active

      oldest

      votes









      active

      oldest

      votes






      active

      oldest

      votes









      5














      css




      display:inline-block




      add div right part and left part css






      share|improve this answer



















      • 1





        Can you fiddle it?

        – a coder
        Jan 12 '15 at 22:53
















      5














      css




      display:inline-block




      add div right part and left part css






      share|improve this answer



















      • 1





        Can you fiddle it?

        – a coder
        Jan 12 '15 at 22:53














      5












      5








      5







      css




      display:inline-block




      add div right part and left part css






      share|improve this answer













      css




      display:inline-block




      add div right part and left part css







      share|improve this answer












      share|improve this answer



      share|improve this answer










      answered Dec 27 '13 at 7:45









      BipBip

      4772825




      4772825








      • 1





        Can you fiddle it?

        – a coder
        Jan 12 '15 at 22:53














      • 1





        Can you fiddle it?

        – a coder
        Jan 12 '15 at 22:53








      1




      1





      Can you fiddle it?

      – a coder
      Jan 12 '15 at 22:53





      Can you fiddle it?

      – a coder
      Jan 12 '15 at 22:53













      2














      Set 'right part' div float to right. Please check, you are using space in id selectors which is not right.






      share|improve this answer






























        2














        Set 'right part' div float to right. Please check, you are using space in id selectors which is not right.






        share|improve this answer




























          2












          2








          2







          Set 'right part' div float to right. Please check, you are using space in id selectors which is not right.






          share|improve this answer















          Set 'right part' div float to right. Please check, you are using space in id selectors which is not right.







          share|improve this answer














          share|improve this answer



          share|improve this answer








          edited Nov 13 '17 at 11:21

























          answered Dec 27 '13 at 7:25









          jnuKjnuK

          1,5741626




          1,5741626























              0














              Your code should align the divs in one line... see here



              width:auto; float:left; will only take the content width as div width, so it will always be inline as long as the total width < 1000px.



              A simpler suggestion would be to use percentage for widths, this way you don't need to inline display the.



              Also, idv # and . do not contan names with space, they are supposed to be one single word (notice the change i made to your id names)



              demo



              html, body {
              width:100%;
              height:100%;
              }
              #main {
              width:100%;
              height:100%;
              float:left;
              text-align:justify;
              margin-bottom:15px;
              }
              #right_part {
              width:49%;
              float:left;
              border:1px solid #000;
              }
              #left_part {
              border:1px solid #000;
              float:left;
              width:49%;
              display:inline-block;
              }





              share|improve this answer
























              • Hi @NoobEditor, Yes that is why I am confused about this issue.Actually there is one more problem, I am keeping the Image and the details which I am fetching from DB in one div and the gridview is in 2nd div. But in most of the cases the details which I am fetching doesn't display on the page. whereas gridview is displayed.

                – Omi
                Dec 27 '13 at 9:38













              • Width of the main div is 1000px, and I have kept these two div's inside the parent div. I guess now the problem is with the width of the two div's.I have also tried width=auto; option, but in that case alignment of these two div's get's effected.

                – Omi
                Dec 27 '13 at 9:44











              • if the number of width is fixed( if they are only 2), then assign width:500px to both the child divs, that would help them, see here jsfiddle.net/9a3tH/6/ ...also it not width=auto but width:auto

                – NoobEditor
                Dec 27 '13 at 10:10











              • @user2862233 : as for your image and data...m not mch of asp guy...you have to check 1st if the data is coming on the page or not...look through the page source and see if required data is there or not!

                – NoobEditor
                Dec 27 '13 at 10:11
















              0














              Your code should align the divs in one line... see here



              width:auto; float:left; will only take the content width as div width, so it will always be inline as long as the total width < 1000px.



              A simpler suggestion would be to use percentage for widths, this way you don't need to inline display the.



              Also, idv # and . do not contan names with space, they are supposed to be one single word (notice the change i made to your id names)



              demo



              html, body {
              width:100%;
              height:100%;
              }
              #main {
              width:100%;
              height:100%;
              float:left;
              text-align:justify;
              margin-bottom:15px;
              }
              #right_part {
              width:49%;
              float:left;
              border:1px solid #000;
              }
              #left_part {
              border:1px solid #000;
              float:left;
              width:49%;
              display:inline-block;
              }





              share|improve this answer
























              • Hi @NoobEditor, Yes that is why I am confused about this issue.Actually there is one more problem, I am keeping the Image and the details which I am fetching from DB in one div and the gridview is in 2nd div. But in most of the cases the details which I am fetching doesn't display on the page. whereas gridview is displayed.

                – Omi
                Dec 27 '13 at 9:38













              • Width of the main div is 1000px, and I have kept these two div's inside the parent div. I guess now the problem is with the width of the two div's.I have also tried width=auto; option, but in that case alignment of these two div's get's effected.

                – Omi
                Dec 27 '13 at 9:44











              • if the number of width is fixed( if they are only 2), then assign width:500px to both the child divs, that would help them, see here jsfiddle.net/9a3tH/6/ ...also it not width=auto but width:auto

                – NoobEditor
                Dec 27 '13 at 10:10











              • @user2862233 : as for your image and data...m not mch of asp guy...you have to check 1st if the data is coming on the page or not...look through the page source and see if required data is there or not!

                – NoobEditor
                Dec 27 '13 at 10:11














              0












              0








              0







              Your code should align the divs in one line... see here



              width:auto; float:left; will only take the content width as div width, so it will always be inline as long as the total width < 1000px.



              A simpler suggestion would be to use percentage for widths, this way you don't need to inline display the.



              Also, idv # and . do not contan names with space, they are supposed to be one single word (notice the change i made to your id names)



              demo



              html, body {
              width:100%;
              height:100%;
              }
              #main {
              width:100%;
              height:100%;
              float:left;
              text-align:justify;
              margin-bottom:15px;
              }
              #right_part {
              width:49%;
              float:left;
              border:1px solid #000;
              }
              #left_part {
              border:1px solid #000;
              float:left;
              width:49%;
              display:inline-block;
              }





              share|improve this answer













              Your code should align the divs in one line... see here



              width:auto; float:left; will only take the content width as div width, so it will always be inline as long as the total width < 1000px.



              A simpler suggestion would be to use percentage for widths, this way you don't need to inline display the.



              Also, idv # and . do not contan names with space, they are supposed to be one single word (notice the change i made to your id names)



              demo



              html, body {
              width:100%;
              height:100%;
              }
              #main {
              width:100%;
              height:100%;
              float:left;
              text-align:justify;
              margin-bottom:15px;
              }
              #right_part {
              width:49%;
              float:left;
              border:1px solid #000;
              }
              #left_part {
              border:1px solid #000;
              float:left;
              width:49%;
              display:inline-block;
              }






              share|improve this answer












              share|improve this answer



              share|improve this answer










              answered Dec 27 '13 at 9:16









              NoobEditorNoobEditor

              11.4k95083




              11.4k95083













              • Hi @NoobEditor, Yes that is why I am confused about this issue.Actually there is one more problem, I am keeping the Image and the details which I am fetching from DB in one div and the gridview is in 2nd div. But in most of the cases the details which I am fetching doesn't display on the page. whereas gridview is displayed.

                – Omi
                Dec 27 '13 at 9:38













              • Width of the main div is 1000px, and I have kept these two div's inside the parent div. I guess now the problem is with the width of the two div's.I have also tried width=auto; option, but in that case alignment of these two div's get's effected.

                – Omi
                Dec 27 '13 at 9:44











              • if the number of width is fixed( if they are only 2), then assign width:500px to both the child divs, that would help them, see here jsfiddle.net/9a3tH/6/ ...also it not width=auto but width:auto

                – NoobEditor
                Dec 27 '13 at 10:10











              • @user2862233 : as for your image and data...m not mch of asp guy...you have to check 1st if the data is coming on the page or not...look through the page source and see if required data is there or not!

                – NoobEditor
                Dec 27 '13 at 10:11



















              • Hi @NoobEditor, Yes that is why I am confused about this issue.Actually there is one more problem, I am keeping the Image and the details which I am fetching from DB in one div and the gridview is in 2nd div. But in most of the cases the details which I am fetching doesn't display on the page. whereas gridview is displayed.

                – Omi
                Dec 27 '13 at 9:38













              • Width of the main div is 1000px, and I have kept these two div's inside the parent div. I guess now the problem is with the width of the two div's.I have also tried width=auto; option, but in that case alignment of these two div's get's effected.

                – Omi
                Dec 27 '13 at 9:44











              • if the number of width is fixed( if they are only 2), then assign width:500px to both the child divs, that would help them, see here jsfiddle.net/9a3tH/6/ ...also it not width=auto but width:auto

                – NoobEditor
                Dec 27 '13 at 10:10











              • @user2862233 : as for your image and data...m not mch of asp guy...you have to check 1st if the data is coming on the page or not...look through the page source and see if required data is there or not!

                – NoobEditor
                Dec 27 '13 at 10:11

















              Hi @NoobEditor, Yes that is why I am confused about this issue.Actually there is one more problem, I am keeping the Image and the details which I am fetching from DB in one div and the gridview is in 2nd div. But in most of the cases the details which I am fetching doesn't display on the page. whereas gridview is displayed.

              – Omi
              Dec 27 '13 at 9:38







              Hi @NoobEditor, Yes that is why I am confused about this issue.Actually there is one more problem, I am keeping the Image and the details which I am fetching from DB in one div and the gridview is in 2nd div. But in most of the cases the details which I am fetching doesn't display on the page. whereas gridview is displayed.

              – Omi
              Dec 27 '13 at 9:38















              Width of the main div is 1000px, and I have kept these two div's inside the parent div. I guess now the problem is with the width of the two div's.I have also tried width=auto; option, but in that case alignment of these two div's get's effected.

              – Omi
              Dec 27 '13 at 9:44





              Width of the main div is 1000px, and I have kept these two div's inside the parent div. I guess now the problem is with the width of the two div's.I have also tried width=auto; option, but in that case alignment of these two div's get's effected.

              – Omi
              Dec 27 '13 at 9:44













              if the number of width is fixed( if they are only 2), then assign width:500px to both the child divs, that would help them, see here jsfiddle.net/9a3tH/6/ ...also it not width=auto but width:auto

              – NoobEditor
              Dec 27 '13 at 10:10





              if the number of width is fixed( if they are only 2), then assign width:500px to both the child divs, that would help them, see here jsfiddle.net/9a3tH/6/ ...also it not width=auto but width:auto

              – NoobEditor
              Dec 27 '13 at 10:10













              @user2862233 : as for your image and data...m not mch of asp guy...you have to check 1st if the data is coming on the page or not...look through the page source and see if required data is there or not!

              – NoobEditor
              Dec 27 '13 at 10:11





              @user2862233 : as for your image and data...m not mch of asp guy...you have to check 1st if the data is coming on the page or not...look through the page source and see if required data is there or not!

              – NoobEditor
              Dec 27 '13 at 10:11











              0














              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>





              share|improve this answer




























                0














                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>





                share|improve this answer


























                  0












                  0








                  0







                  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>





                  share|improve this answer













                  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>






                  share|improve this answer












                  share|improve this answer



                  share|improve this answer










                  answered Nov 17 '18 at 0:32









                  Rich PaulooRich Pauloo

                  2,46211032




                  2,46211032















                      Popular posts from this blog

                      Bressuire

                      Vorschmack

                      Quarantine