Float:right is limited by its parent div, making it align right/go down a line

Question

I'm trying to get a toolbar div, with the left div aligned on the left and the right div aligned on the very right of the screen.

I've tried setting a fixed divider setting for the parent divider, but none of the methods exactly seem intuitive. I can't use 100vw for the parent div since there's a toolbar on the left.

.dashboard_secondary_toolbar{
    /* display:inline-block; */
    flex: 1;
}

.dashboard_secondary_toolbar_left{
    float: left;
}

.dashboard_secondary_toolbar_right{
    float: right;
}

<div class = "dashboard_secondary_toolbar">
    <div class = "dashboard_secondary_toolbar_left">
        <p> align me left </p>
    </div>
    <div class = "dashboard_secondary_toolbar_right">
        <p> align me right </p>
    </div>
</div>

Note that your example is missing a `"` in `class = "dashboard_secondary_toolbar` and adding it back changes the outcome of your example. — j08691, Jul 01 '19 at 16:47
@j08691 Thanks, I had to rewrite it instead of copy & paste since I had a lot of things inbetween the code. It's edited now, should be working to not work. — Dragonsnap, Jul 01 '19 at 16:48
Consider switching to flex, it's much easier and more powerful: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ — GaloisGirl, Jul 01 '19 at 16:50

score 1 · Accepted Answer · answered Jul 01 '19 at 16:51

just use flex instead of float each div

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

<div class="dashboard_secondary_toolbar">
  <div class="dashboard_secondary_toolbar_left">
    <p> align me left </p>
  </div>
  <div class="dashboard_secondary_toolbar_right">
    <p> align me right </p>
  </div>
</div>

score 0 · Answer 2 · answered Jul 01 '19 at 17:02

You can achieve it using FlexBox.

<div class="dashboard_secondary_toolbar">
    <p> align me left </p>
    <p> align me right </p>
</div>

styles:

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

Nowadays you do not really use "float" anymore.

score -1 · Answer 3 · answered Jul 01 '19 at 16:49

-1

You don't need float, just use display: flex; instead of display: inline-block;

answered Jul 01 '19 at 16:49

Denis Omerovic

1,420
1
10
23

It doesn't change anything. Did remove it though, thanks. – Dragonsnap Jul 01 '19 at 16:50
here is the working example https://jsfiddle.net/chille1987/s57yrtnf/1/ – Denis Omerovic Jul 01 '19 at 16:53

Float:right is limited by its parent div, making it align right/go down a line

3 Answers3