Align one to right margin of
element

Question

I have the following code, it is a <div> element which contains two <span> elements separated by a <br>

<div style="background-color: orange;">
    <span>Foo</span><br>
    <span>Bar</span>
</div>

https://jsfiddle.net/73bwrdxk/

Not sure if relevant but I am using Bootstrap 3.

I would like that the second <span> (the one with the text Bar) will be right aligned.

Possible duplicate of [text align right in a span](https://stackoverflow.com/questions/40427457/text-align-right-in-a-span) — Mohammad Javad Noori, Feb 12 '18 at 05:49

Abdulla Nilam · Accepted Answer · 2018-02-12T17:30:26.317

4

you can use float

style="float: right;"

Using In-line style tag

<div style="background-color: orange;">
    <span>Foo</span>
    <br>
    <span style="float: right;">Bar</span>
</div>

Using bootstrap (pull-left and pull-right)

<div style="background-color: orange;">
    <span>Foo</span>
    <br>
    <span class="pull-right">Bar</span>
</div>

DEMO (Using In-line style tag)

edited Feb 12 '18 at 17:30

answered Feb 12 '18 at 05:46

Abdulla Nilam

36,589
17
64
85

Hasanuzzaman Sattar · Answer 2 · 2018-02-12T06:02:51.563

2

use bootstrap class pull-right in span to make its align right

<div style="background-color: orange;">
    <span>Foo</span><br>
    <span class="pull-right">Bar</span>
</div>

edited Feb 12 '18 at 06:02

answered Feb 12 '18 at 05:49

Hasanuzzaman Sattar

592
1
5
20

score 2 · Answer 3 · answered Feb 12 '18 at 06:06

2

.spanl{
float:right;

}

<div style="background-color: orange;" class=" ">
<span>Foo</span>
<span class="spanl">Bar</span>
</div>

answered Feb 12 '18 at 06:06

Hp_issei

579
6
18

I need `Bar` to be BELOW `Foo` – M.E. Feb 12 '18 at 15:14

score 2 · Answer 4 · answered Feb 12 '18 at 06:31

2

You can simply replace with this code:

<div style="background-color: orange;">
    <span>Foo</span><br>
    <span style="float:right">Bar</span> 
</div>

answered Feb 12 '18 at 06:31

R Hazarika

21
3

Welcome to Stackoverflow. It would be better if you checkout [How to Answer](https://stackoverflow.com/help/how-to-answer) page for future endeavor at Stack overflow. -Thank you – Momin Mar 10 '18 at 03:36

score 1 · Answer 5 · answered Feb 12 '18 at 05:47

1

You ca make use of float property and clearfix. Using Float on child Elements collapse the parent element size. So you need to add clearfix class to parent to avoid collapse situation.

.clearfix::after{
    content:"";
    display:table;
}

.floatRight{
  float:right;
}

<div style="background-color: orange;" class="clearfix">
<span>Foo</span>
<span class="floatRight">Bar</span>
</div>

answered Feb 12 '18 at 05:47

Chandra Shekhar

3,550
2
14
22

I need `Bar` to be BELOW `Foo` – M.E. Feb 12 '18 at 15:13

Align one to right margin of element

5 Answers5

DEMO (Using In-line style tag)

Align one to right margin of
element