Center two elements vertically, and float left and right

Question

I am trying to vertically align two divs in a parent div.

The vertical align is straightforward, but I am also trying float the divs, one left and one right.

Is this possible to do?

.outer {
  background: red;
  height: 300px;
  display: flex;
  align-items: center;
}
.inner_right {
  background: blue;
  float: right;
}
.inner_left {
  background: yellow;
  float: left;
}

<div class="outer">
  <div class="inner_right">
    RIGHT MIDDLE
  </div>
  <div class="inner_left">
    LEFT MIDDLE
  </div>
</div>

https://jsfiddle.net/xh8rbnmh/

Don't mix flex+floats. Don't mix floats+anything. Floats will crash your layout. — Marcos Pérez Gude, May 30 '16 at 13:32

score 2 · Accepted Answer · edited May 23 '17 at 11:44

body { margin: 0; }

.outer {
    display: flex;
    align-items: center;
    justify-content: space-between; /* 1 */
    background: red;
    height: 300px;
}

.inner_right {
    order: 1;                       /* 2 */
    /* float: right; */             /* 3 */
    background: aqua;
}

.inner_left {
    /* float: left; */              /* 3 */
    background: yellow;
}

<div class="outer">
  <div class="inner_right">RIGHT MIDDLE</div>
  <div class="inner_left">LEFT MIDDLE</div>
</div>

jbyrd · Answer 2 · 2016-05-30T13:23:20.193

1

Simple. You need to put your left div first in the markup. Then simply add margin: auto to the right div.

Note that if you need to retain the original markup (with the right div first, then the left div), flexbox allows you to order the divs using the intuitive order: property on each div.

I've updated the fiddle here: https://jsfiddle.net/v6facjnp/4/

edited May 30 '16 at 13:23

answered May 29 '16 at 22:07

jbyrd

5,287
7
52
86

Also, as @LordNeo noted, floats will not do anything when using flexbox, so you can get rid of those. – jbyrd May 29 '16 at 22:08
I can't change the markup, it has to be a pure css solution. – sci-guy May 29 '16 at 22:21
@renegade - I've updated my answer and fiddle based on the added requirement that the markup not change. – jbyrd May 30 '16 at 13:18
1

Either flex `auto` margins (like this answer) or `justify-content` (like my answer) can do the job. +1 – Michael Benjamin May 30 '16 at 13:44

score 0 · Answer 3 · answered May 29 '16 at 22:01

This is alternative solution not using flexbox - noticed that margin has to be height of element.

  .outer {
  background: red;
  height: 300px;
  position:relative;
 }
.inner_right {
 background: blue;
 position:absolute;
 right:0px;
 top:50%;
 margin-top: -18px;
 }

.inner_left {
 background: yellow;
 position:absolute;
 top:50%;
 left:0px;
 margin-top: -18px;
}

LordNeo · Answer 4 · 2016-05-29T22:08:58.577

First lets fix, some: left at the left, right at the right

<div class="outer">
  <div class="inner_left">
   LEFT MIDDLE
  </div>
  <div class="inner_right">
    RIGHT MIDDLE
  </div>
</div>

Second: Flex makes the elements to behave like blocks, discarding the float property. So we use margins and justify

.outer {
  background: red;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content:flex-end; //Move all items to the right
}
.inner_right {
  background: blue;
}

.inner_left {
  background: yellow;
  margin-right:auto;//Move this to the left
}

Center two elements vertically, and float left and right

4 Answers4