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;
}
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?
html css
marked as duplicate by TylerH
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.
add a comment |
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?
html css
marked as duplicate by TylerH
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
add a comment |
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?
html css
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
html css
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
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
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
add a comment |
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
add a comment |
4 Answers
4
active
oldest
votes
css
display:inline-block
add div right part and left part css
1
Can you fiddle it?
– a coder
Jan 12 '15 at 22:53
add a comment |
Set 'right part' div float to right. Please check, you are using space in id selectors which is not right.
add a comment |
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;
}
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 assignwidth:500px
to both the child divs, that would help them, see here jsfiddle.net/9a3tH/6/ ...also it notwidth=auto
butwidth: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
add a comment |
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>
add a comment |
4 Answers
4
active
oldest
votes
4 Answers
4
active
oldest
votes
active
oldest
votes
active
oldest
votes
css
display:inline-block
add div right part and left part css
1
Can you fiddle it?
– a coder
Jan 12 '15 at 22:53
add a comment |
css
display:inline-block
add div right part and left part css
1
Can you fiddle it?
– a coder
Jan 12 '15 at 22:53
add a comment |
css
display:inline-block
add div right part and left part css
css
display:inline-block
add div right part and left part css
answered Dec 27 '13 at 7:45
BipBip
4772825
4772825
1
Can you fiddle it?
– a coder
Jan 12 '15 at 22:53
add a comment |
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
add a comment |
Set 'right part' div float to right. Please check, you are using space in id selectors which is not right.
add a comment |
Set 'right part' div float to right. Please check, you are using space in id selectors which is not right.
add a comment |
Set 'right part' div float to right. Please check, you are using space in id selectors which is not right.
Set 'right part' div float to right. Please check, you are using space in id selectors which is not right.
edited Nov 13 '17 at 11:21
answered Dec 27 '13 at 7:25
jnuKjnuK
1,5741626
1,5741626
add a comment |
add a comment |
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;
}
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 assignwidth:500px
to both the child divs, that would help them, see here jsfiddle.net/9a3tH/6/ ...also it notwidth=auto
butwidth: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
add a comment |
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;
}
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 assignwidth:500px
to both the child divs, that would help them, see here jsfiddle.net/9a3tH/6/ ...also it notwidth=auto
butwidth: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
add a comment |
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;
}
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;
}
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 assignwidth:500px
to both the child divs, that would help them, see here jsfiddle.net/9a3tH/6/ ...also it notwidth=auto
butwidth: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
add a comment |
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 assignwidth:500px
to both the child divs, that would help them, see here jsfiddle.net/9a3tH/6/ ...also it notwidth=auto
butwidth: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
add a comment |
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>
add a comment |
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>
add a comment |
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>
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>
answered Nov 17 '18 at 0:32
Rich PaulooRich Pauloo
2,46211032
2,46211032
add a comment |
add a comment |
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