Align element to right edge of viewport

Question

I have two images in divs so they are shown side by side.

How do I align the 2nd image (The Value) to the right so it aligns with the right edge? Currently there is space on the right of the 2nd image

Jsfiddle: https://jsfiddle.net/huskydawgs/ksq1ajsa/1/

.wrapper {
  width: 820px;
}

.container-2col-nm {
  display: flex;
  justify-content: center;
}

.container-2col-nm>div {
  margin: 0;
  padding: 0;
  text-align: left;
}

.box-2col-nm-1 {
  width: 50%;
}

.box-2col-nm-2 {
  width: 50%;
}

<div class="wraper">
  <div class="container-2col-nm">
    <div class="box-2col-nm-1">
      <img height="200" src="http://www.onvia.com/sites/default/files/promo_the_experience.png" width="350"></div>
    <div class="box-2col-nm-2">
      <img height="200" src="http://www.onvia.com/sites/default/files/icon_careers_the_value_350x200.png" width="350"></div>
  </div>
  <p><img alt="Find Opportunities" height="86" src="http://www.onvia.com/sites/default/files/test_banner_more_info.png" width="720"></p>

</div>

score 3 · Accepted Answer · edited Oct 24 '19 at 14:24

Remove text-align: left from your code. That's a default value, and it's keeping the content of each flex item to the left.

Just give the second item text-align: right.

.container-2col-nm {
  display: flex;
  justify-content: center;
}

.container-2col-nm > div {
  margin: 0;
  padding: 0;
  /* text-align: left; */
}

.container-2col-nm > div:last-child {
  text-align: right; /* new */
}

.box-2col-nm-1,
.box-2col-nm-2 {
  width: 50%;
}

.wrapper {
  width: 820px;
}

<div class="wraper">
  <div class="container-2col-nm">
    <div class="box-2col-nm-1">
      <img height="200" src="http://www.onvia.com/sites/default/files/promo_the_experience.png" width="350"></div>
    <div class="box-2col-nm-2">
      <img height="200" src="http://www.onvia.com/sites/default/files/icon_careers_the_value_350x200.png" width="350"></div>
  </div>
  <p><img alt="Find Opportunities" height="86" src="http://www.onvia.com/sites/default/files/test_banner_more_info.png" width="720"></p>

</div>

score 0 · Answer 2 · answered Dec 30 '15 at 00:03

Is it what you want? check the example

        //Just add a class to image
            <img class="rimg" height="200" src="http://www.onvia.com/sites/default/files/icon_careers_the_value_350x200.png" width="350">

        // and set some css rules
            .rimg {
                  display: block;
                  float: right;

                }

the example

score 0 · Answer 3 · answered Dec 30 '15 at 00:09

One solution to push the img to the right, could be position: absolute and have a right offset of 0, e.g.

.box-2col-nm-2 {
    width: 50%;
    position: relative;
}

.box-2col-nm-2 img {
    position: absolute;
    right: 0;
}

The drawback of this is, img won't be part of the document flow anymore.

Modified Jsfiddle

score 0 · Answer 4 · edited May 23 '17 at 11:59

One flex method:

.container-2col-nm {
    display: flex;
    justify-content: space-between; /* value changed from `center` */
}

/*
.box-2col-nm-1 {  width: 50%;  }
.box-2col-nm-2 {  width: 50%;  }
*/

DEMO 1

Another flex method:

.container-2col-nm {
    display: flex;
    /* justify-content: center; */
}

.box-2col-nm-1 {  /* width: 50%; */ }

div.box-2col-nm-2 {
    /* width: 50%; */
    margin-left: auto;
}

/* div selector added to provide enough specificity to override another margin rule */

DEMO 2

For an explanation of these methods, and additional options, see: Methods for Aligning Flex Items

Align element to right edge of viewport

4 Answers4