7

How to align element to right side of div box?

My div

<div id="foo">
    <div id="tree">Some Text here</div>
</div>

My css

#foo {
    display: block;
    width: 500px;
    height: 500px;
    background: #5e5e5e;
}

#tree {
    width: 100px;
    height: 30px;
    background: #000000;
}

I need tree placed at top-right side of foo.

let
  • 153
  • 1
  • 2
  • 8
  • [Do none of these work for you?](https://stackoverflow.com/search?q=align+element+right+side+div) This oft asked question is oft answered all over SO and the internet. – Rob Dec 27 '19 at 13:19
  • You can use Float property of CSS like "float: right;". Check the following link: https://stackoverflow.com/questions/27600267/put-element-to-the-right-side-of-a-div – Karan Raiyani Dec 27 '19 at 13:21

5 Answers5

14

There are a few ways to accomplish this. One way is to add an automatic left margin to the tree:

margin-left: auto;

Another option would be to apply float: right; to the tree, which may or may not result in the content flow you need.

And finally, my recommendation honestly would be to just use flexbox.

Margin Example

#foo {
    display: block;
    width: 500px;
    height: 500px;
    background: #5e5e5e;
}

#tree {
    width: 100px;
    height: 30px;
    background: #000000;
    margin-left: auto;
}
<div id="foo">
    <div id="tree">Some Text here</div>
</div>

Float Example

#foo {
    display: block;
    width: 500px;
    height: 500px;
    background: #5e5e5e;
}

#tree {
    width: 100px;
    height: 30px;
    background: #000000;
    float: right;
}
<div id="foo">
    <div id="tree">Some Text here</div>
</div>

Flex Example

#foo {
    display: flex;
    justify-content: flex-end;
    width: 500px;
    height: 500px;
    background: #5e5e5e;
}

#tree {
    display: flex;
    width: 100px;
    height: 30px;
    background: #000000;
}
<div id="foo">
    <div id="tree">Some Text here</div>
</div>
Jeremy Harris
  • 24,318
  • 13
  • 79
  • 133
5

Give float:right to #tree.

#foo {
    display: block;
    width: 500px;
    height: 500px;
    background: #5e5e5e;
}

#tree {
 float: right;
    width: 100px;
    height: 30px;
    background: #000000;
}
  <div id="foo">
  <div id="tree">Some Text here</div>
 </div>
Pushprajsinh Chudasama
  • 7,772
  • 4
  • 20
  • 43
1

It is possible with position:absolute 

#foo {
        display: block;
        width: 500px;
        height: 500px;
        position: relative;
        background: #5e5e5e;
    }

    #tree {
        width: 100px;
        height: 30px;
        background: #000000;
        color: #fff;
        position: absolute;
        right: 0;
    }
    <div id="foo">
    <div id="tree">Some Text here</div>
</div>
Manohar
  • 15
  • 2
0

One way would be to use a position: relative / absolute combination:

#foo {
    display: block;
    width: 500px;
    height: 500px;
    background: #5e5e5e;
    position:relative;
}

#tree {
    width: 100px;
    height: 30px;
    background: #000000;
    position:absolute;
    right:0;
}
<div id="foo">
    <div id="tree">Some Text here</div>
</div>
Anis R.
  • 6,656
  • 2
  • 15
  • 37
0

Update your css like this. #tree div will always be at the top right corner of #foo

 #foo {
        display: block;
        width: 500px;
        height: 500px;
        background: #5e5e5e;
        position: relative;
    }

    #tree {
        width: 100px;
        height: 30px;
        background: #000000;
        position: absolute;
        top: 0;
        right: 0;
    }
prathameshk73
  • 1,048
  • 1
  • 5
  • 16