How to align this vertically aligned div to the right?

Question

I have a arrangement as follows:

<style>
    .title {
      background: red;
    }
    .outer {
      display: inline-block;
      border: 1px solid red; 
      background: green;
    }
    .inner {
      display: inline-block;
      vertical-align: middle;
    }
    .left {
      background: yellow; 
    }
    .right {
      background: cyan; 
    }
</style>

<div class="outer">
  <div class="title">long title</div>
  <div class="inner left">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>
  <div class="inner right">
    <div>1</div>
    <div>2</div>
  </div>
</div>

How can I make the div with the class right to be aligned to the right?

The result can be seen at http://www.cssdesk.com/uCmVL

Edit

The two inner divs need to maintain its vertical alignment. i.e. vertical-align: whatever;

Edit 2

The layout is somewhat complicated, it uses transform to zoom in and zoom out, I tried top: 50%; transform: translateY(-50%); in the inner class but it breaks the calculations to place the SVG PATH elements

Possible duplicate of [How to vertically middle-align floating elements of unknown heights?](http://stackoverflow.com/questions/12557897/how-to-vertically-middle-align-floating-elements-of-unknown-heights) — Black Bird, Aug 05 '16 at 02:44
@zsawaf No, I haven't tried flexbox yet. I'll take a look at how it works. — rraallvv, Aug 05 '16 at 02:50
@rraallvv, if *ALL* containers have same fixed width, which seems so, check my answer it fixes it — Mi-Creativity, Aug 05 '16 at 03:10
@Mi-Creativity they have `min-width`, so a title or port label longer could potentially make the width bigger to fit the content. — rraallvv, Aug 05 '16 at 03:15
@rraallvv well done. +1 for looking into flex. I saw that you figured it out after I posted my answer, but I'll keep it for other people to reference :) — zsawaf, Aug 05 '16 at 13:49

score 1 · Answer 1 · answered Aug 05 '16 at 02:18

1

If it is always going to be hard to the right:

.right {
  background: cyan; 
  float:right;
}

answered Aug 05 '16 at 02:18

DorkyMork

66
4

score 1 · Answer 2 · answered Aug 05 '16 at 02:29

All of the previous solutions will align it to the right, however they do not keep the vertical align middle. To do that you would either need to switch to using display: table & table-cell or adjust the code be absolutely positioned within a relatively positioned container using top & right margins.

If your table is not going to be dynamic and will have a fixed height, you can use a pixel value for the top positioning, otherwise play with percentages.

http://www.cssdesk.com/H7pxN

.title {
  background: red;
}

.outer {
  position: relative; //
  display: inline-block;
  border: 1px solid red; 
  background: green;
}

.inner {
  display: inline-block;
  vertical-align: middle;
}

.left {
  background: yellow; 
}

.right {
  position: absolute; // 
  right: 0; //
  top: 40%; // 
  background: cyan; 
}

I tried `table` and `table-cell` [here](http://www.cssdesk.com/2njqf) but `text-alignent` to the right doesn't seem to work either. — rraallvv, Aug 05 '16 at 03:05

score 1 · Accepted Answer · answered Aug 05 '16 at 13:48

You can do a lot with flexbox. Here is an example of the layout you're looking for.

.main-container {
  background-color: #eee;
}
h1 {
  text-align: center;  
}
.columns {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.red {
  background-color: #f00;  
}

.blue {
  background-color: #f99;  
}

<div class="main-container">
  <h1>Title</h1>
  <div class="columns">
    <div class="column red">
      <p>First Row</p>
      <p>Second Row</p>
      <p>Third Row</p>
    </div>
    <div class="column blue">
      <p>Centered First Row</p>
      <p>Centered Second Row</p>
    </div>
  </div>
</div>

Thanks for pointing out about flexbox, that pretty much covers every layout I could think of. — rraallvv, Aug 06 '16 at 01:25

score 0 · Answer 4 · answered Aug 05 '16 at 02:23

Make your outer div positioned relative and then make the right div go absolute to the right. Like so

.outer {

    position: relative;

    display: inline-block;
    border: 1px solid red; 
    background: green;
}

.right {

    position: absolute;
    right: 0;

    background: cyan; 
}

score 0 · Answer 5 · answered Aug 05 '16 at 03:08

There's a work around if you have fixed width for the container (.outer), which I noticed in the image posted in the question ALL have same fixed width, if so, then give the .right div a position:relative, and set a left value equals the fixed width of the .outer exactly, then translate its x value by -100%.

jsFiddle

.title {
  background: red;
}
.outer {
  display: inline-block;
  border: 1px solid red;
  background: green;
  width: 70px; /* add this */
}
.inner {
  display: inline-block;
  vertical-align: middle;
}
.left {
  background: yellow;
}
.right {
  background-color: cyan;
  /* and add the below */
  position: relative;
  left: 60px;
  text-align: right;
  transform: translateX(-100%);
}

<div class="outer">
  <div class="title">long title</div>
  <div class="inner left">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>
  <div class="inner right">
    <div>1</div>
    <div>22</div>
  </div>
</div>

I can’t touch the transform for individual nodes because the calculations to place the SVG PATH elements breaks when using the zoom. The zoom is accomplished by changing the transform in the container, the one that holds all the elements with class `outer`. — rraallvv, Aug 05 '16 at 03:21

score 0 · Answer 6 · answered Aug 05 '16 at 05:49

Adding a flexbox wrapper element did the trick.

.title {
  background: red;
  text-align: center;
}

.outer {
  display: inline-block;
  border: 1px solid red; 
  background: green;
  min-width: 200px;
}

.wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.left {
  background: yellow; 
}

.right {
  background: cyan; 
  text-align: right;  
}

<div class="outer">
  <div class="title">long title</div>
  <div class="wrapper">
    <div class="left">
      <div>1</div>
      <div>22</div>
      <div>333</div>
    </div>
    <div class="right">
      <div>1</div>
      <div>22</div>
    </div>
  </div>
</div>

Be advised that you don't need inline-block when you're using flex. It eliminates the need for float and inline displays. — zsawaf, Aug 05 '16 at 13:50

How to align this vertically aligned div to the right?

6 Answers6