Float right and position absolute doesn't work together

Question

I want a div to be always at the right of its parent div, so I use float:right. It works.

But I also want it to not affect other content when inserted, so I use position:absolute.

Now float:right doesn't work, my div is always at the left of its parent div. How can I move it to the right?

Gilmour

Answer 1

Use

position:absolute; right: 0;

No need for float:right with absolute positioning

Also, make sure the parent element is set to position:relative;

Fitted

if a want div at center of parent element, how can I do that? – Gilmour

Thanks for your help. I use left:50% and margin-left:-??px (?? depend on your div width) – Gilmour

With @eivers88's answer, I still need to remove 'overflow-y: auto;' from the parent element to make it work. – Action

what if div's width is dynamic – Biernat

Ok, I got that float: right is not needed for absolute positioning, but... What about when you have two absolute elements inside same (position:relative) parent and you want them aligned to the right, one beside the other? Their width is dynamic... – Dustan

Why is this error considered correct and the answer? float:right should be floating the element outside of the element, right:0 puts it inside the element. – Precarious

Answer 2

Generally speaking, float is a relative positioning statement, since it specifies the position of the element relative to its parent container (floating to the right or left). This means it's incompatible with the position:absolute property, because position:absolute is an absolute positioning statement. You can either float an element and allow the browser to position it relative to its parent container, or you can specify an absolute position and force the element to appear in a certain location. Specifically, an element with position:absolute will be placed at whatever offset you specify (with left, right, top, or bottom) from the position of its nearest ancestor (containing element) with a position property, regardless of whether it has a float property or not. If it doesn't have any ancestors with a position property, it will be placed at your specified offset from the edge of the screen.

If you want an absolutely-positioned element to appear on the right side of its parent div, you can use position: absolute; right: 0; -- as long as the parent div has a position property such as position:relative. If the parent div doesn't have a position property, though, this won't work, and you'll need to stick to float:right.

Verminous

If the parent div is position: relative, this div would be positioned at the right of that parent, rather than the screen. – Procedure

The statement you can specify an absolute position and force the element to appear in a certain position regardless of its parent is incorrect and misleading. Absolute positioning is based on closest not-static positioned ancestor and therefore it could be the parent. Thus saying regardless of parent is incorrect. – Pentup

You're right, CodingYoshi, and I updated my answer to reflect how absolute positioning works. My understanding of CSS has improved since I originally wrote this answer 9 years ago. – Verminous

Answer 3

You can use "translateX(-100%)" and "text-align: right" if your absolute element is "display: inline-block"

<div class="box">
<div class="absolute-right"></div>
</div>

<style type="text/css">
.box{
    text-align: right;
}
.absolute-right{
    display: inline-block;
    position: absolute;
}

/*The magic:*/
.absolute-right{
-moz-transform: translateX(-100%);
-ms-transform: translateX(-100%);
-webkit-transform: translateX(-100%);
-o-transform: translateX(-100%);
transform: translateX(-100%);
}
</style>

You will get absolute-element aligned to the right relative its parent

Karim

Answer 4

Perhaps you should divide your content like such using floats:

<div style="overflow: auto;">
    <div style="float: left; width: 600px;">
        Here is my content!
    </div>
    <div style="float: right; width: 300px;">
        Here is my sidebar!
    </div>
</div>

Notice the overflow: auto;, this is to ensure that you have some height to your container. Floating things takes them out of the DOM, to ensure that your elements below don't overlap your wandering floats, set a container div to have an overflow: auto (or overflow: hidden) to ensure that floats are accounted for when drawing your height. Check out more information on floats and how to use them here.

Hofmannsthal

Answer 5

I was able to absolutely position a right-floated element with one layer of nesting and a tricky margin:

function test() {
  document.getElementById("box").classList.toggle("hide");
}

.right {
  float:right;
}
#box {
  position:absolute; background:#feb;
  width:20em; margin-left:-20em; padding:1ex;
}
#box.hide {
  display:none;
}

<div>
  <div class="right">
    <button onclick="test()">box</button>
    <div id="box">Lorem ipsum dolor sit amet, consectetur adipiscing elit,
      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
      nisi ut aliquip ex ea commodo consequat.
    </div>
  </div>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
    nisi ut aliquip ex ea commodo consequat.
  </p>
</div>

I decided to make this toggleable so you can see how it does not affect the flow of the surrounding text (run it and press the button to show/hide the floated absolute box).

Peshitta

This is an amzing solution. But do you know why #box has an absolute position, but it's wrapping element .right is static positioned - still, #box text area is placed under the button? – Ceremonial

@Ceremonial – The .right element is the parent, so it's not absolute. When its child #box is made absolute, it is removed from the rest of the document's flow, but since I haven't told it to be anywhere else, it stays where it would have originally been placed. – Peshitta