How to align element to right side of div box? [duplicate]

Question

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.

Chrotoem

Do none of these work for you? This oft asked question is oft answered all over SO and the internet. – Crackbrain

You can use Float property of CSS like "float: right;". Check the following link: #27600767 – Spousal

Answer 1

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>

Cowman

I added a couple other options in case the content flow isn't what you are looking for. – Cowman

Answer 2

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>

Verbalism

Answer 3

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>

Consumption

Answer 4

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>

Bromeosin

If i set position:absolute, it's positioning to page, not #foo – Chrotoem

Basic rule of position: absolute, works only with relative position of parent. Please go through the #foo css – Bromeosin

Answer 5

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;
    }

Physique