219

I have a

<div class="parent">
    <div class="child" style="float:right"> Ignore parent? </div>
    <div> another child </div>
</div>

The parent has

.parent {
    display: flex;
}

For my first child, I want to simply float the item to the right.

And my other divs to follow the flex rule set by the parent.

Is this something possible?

If not, how do I do a float: right under flex?

1
  • NOTE: Generally in SO, and not just those here, flexbox answers works for the OP cases b/c float is often misused for its very purpose. But indeed, float with flexbox/order don't work together, and one would have to use some HTML reordering, and in the most common use cases, media queries for float or flex+ aletered order depending of the screen width (for example) Sep 13 at 0:34

4 Answers 4

416

You can't use float inside flex container and the reason is that float property does not apply to flex-level boxes as you can see here Fiddle.

So if you want to position child element to right of parent element you can use margin-left: auto but now child element will also push other div to the right as you can see here Fiddle.

What you can do now is change order of elements and set order: 2 on child element so it doesn't affect second div

.parent {
  display: flex;
}
.child {
  margin-left: auto;
  order: 2;
}
<div class="parent">
  <div class="child">Ignore parent?</div>
  <div>another child</div>
</div>

5
  • 1
    Thanks i can take a look at the first solution. I don't want to use display:absolute as my other children shouldn't be covered under the first child.
    – Zhen Liu
    Mar 23, 2016 at 15:57
  • 6
    "floats do not intrude into the flex container". That's true, but it is not the reason. The reason is that float property does not apply to flex-level boxes.
    – Oriol
    Mar 23, 2016 at 17:25
  • 1
    This works, thank you! Why does justify-self: end; (or something similar) not work for the child? This seems like a not-so-flexy solution to a flexbox problem. Jan 23, 2018 at 18:45
  • 2
    @BradyDowling I know this is a late reply, but justify-self end requires the display to be set to a grid. Flexboxes will ignore justify-self:end. See here: developer.mozilla.org/en-US/docs/Web/CSS/justify-self
    – Paul
    Oct 31, 2019 at 15:49
  • 1
    <div>another child</div> <div class="child">Ignore parent?</div> U can swap the two div and without the order 2 it works too
    – yeeen
    Oct 15, 2020 at 10:08
47

You don't need floats. In fact, they're useless because floats are ignored in flexbox.

You also don't need CSS positioning.

There are several flex methods available. auto margins have been mentioned in another answer.

Here are two other options:

  • Use justify-content: space-between and the order property.
  • Use justify-content: space-between and reverse the order of the divs.

.parent {
    display: flex;
    justify-content: space-between;
}

.parent:first-of-type > div:last-child { order: -1; }

p { background-color: #ddd;}
<p>Method 1: Use <code>justify-content: space-between</code> and <code>order-1</code></p>

<div class="parent">
    <div class="child" style="float:right"> Ignore parent? </div>
    <div>another child </div>
</div>

<hr>

<p>Method 2: Use <code>justify-content: space-between</code> and reverse the order of 
             divs in the mark-up</p>

<div class="parent">
    <div>another child </div>
    <div class="child" style="float:right"> Ignore parent? </div>
</div>

24

Use justify-content: flex-end; in parent:

display: flex;
width: 100%;
flex-wrap: wrap;
justify-content: flex-end;

more info

3
  • 3
    justify-content: flex-end with put BOTH flex items to the right.
    – Peter
    Apr 7, 2022 at 8:39
  • 1
    ok but what if i what to make one element at right and one in left
    – Rman__
    Apr 23, 2022 at 21:27
  • 1
    @scriptydude hello, you can do: justify-content: space-around; Apr 25, 2022 at 8:12
2
display: flex;
flex-wrap: wrap;
justify-content: space-between;
6
  • 2
    Please read How to Answer and edit your answer to contain an explanation as to why this code would actually solve the problem at hand. Always remember that you're not only solving the problem, but are also educating the OP and any future readers of this post
    – chrslg
    Jan 11 at 0:49
  • If you follow the question from the beginning, you should understand the OP is trying to make flex object be at left and right side. Is there need for me to be explaining 'justify-content: space between' ? Jan 12 at 10:22
  • Well, yes, there is. Especially when you answer very old questions. There is already an answer using space-between. Since you add another one, you are supposed to explain why your way of doing is different, and even better, than the already existing upvoted answers. The fact that you, now, tell me that space-between is the core of your answer reinforce my wondering "how this is different than other answers using space-between".
    – chrslg
    Jan 12 at 12:56
  • Just to clarify, I am not tracking "code-only" answers for fun. I don't really care for that question to be frank. But your answer was automatically flagged "low quality" by the system (and I suppose by some users, but I don't know exactly what trigger an answer to be in the "low quality" list). I am required, when reviewing the "low quality" queue to take action. Either edit the answer myself (which I am unable. I am not a pro of CSS, but I do use it from times to times, and yet, I am unable to explain the difference between your answer and others. One extra proof that this ...
    – chrslg
    Jan 12 at 12:59
  • 1
    Oh, I'm sorry, I tried space-around and it works fine by given spaces between each item, but what I actually want was to have the last item at the right side, so the items can occupy the whole width, so I just feels like putting it here for someone might be looking for something similar. Not a big fan of answering questions here. I will try and be putting explanation next time, thanks Jan 19 at 21:04

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.