Aligning two elements differently in same div

Question

I have multiple elements in the a single div.

I want to align one element as "text-align: right" and another element "text-align: left"

Check the below code:

<div class="image_meaning" style="display: none; background-color: white; height: 35px; margin-left: 1px;">
    <input type="checkbox" id="points" value="Temporal Filter" style="text-align: left; "/>
    <label for="tempral_filter" style="text-align: left; ">Points</label>

    <img style="text-align: right;" src="{{ STATIC_URL }}img/cross.png"/>-abc
    <img style="text-align: right;" src="{{ STATIC_URL }}img/blue_triangle.png"/>-cde
</div>

but when I run the code it places both the element to the left.

any idea how to do it?

Answer 1

Answer

There are a few ways to solve your issue the most common one is using the css float property (as of 2016). The more modern ways are using flexbox or grid.

Solution using flexbox

You could use display: flex to do this.

Flexbox is only supported by newer browsers, If IE (9 and below) is your friend please stay away from this method.

Example html:

<div class="wrapper">
    <div class="block"></div>
    <div class="block"></div>
</div>

Example css:

.wrapper { display: flex; }
.block { width: 50%; }

Live demo.

Solution using grid

You could use the new display: grid to do this.

Grid layout is only supported by the most modern browsers (Sep 2017), If you are building on evergreen browsers then great, if not use flex.

Example html:

<div class="wrapper">
    <div class="block"></div>
    <div class="block"></div>
</div>

Example css:

.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

Live demo.

Solution using float

The css float property is the classic way to do this and can be dated back to prehistoric times so it supports basically every browser. The only caveat to this would be the clearfix issue (see below).

Example html:

<div class="wrapper">
    <div class="block-left"></div>
    <div class="block-right"></div>
</div>

Example css:

.block-left { float: left; }
.block-right { float: right; }

Please be aware that floated elements cause their parent to disregard them when it comes to their height. If that is an issue (usually it is), you can use the clearfix hack to solve this situation.

You would define it like so:

.cf:before,
.cf:after {
  content: " ";
  display: table;
}

.cf:after { clear: both; }

And then on your parent element:

<div class="wrapper cf">

This will allow the parent to correctly receive the floated elements height.

Read more about what is the clearfix hack.

Live demo.

---

Other solutions

Solution using inline-block

You could also possibly use the inline-block property to put your elements side by side.

Note that the inline-block option will need to account for white space in the html between the blocks. To counter this, either remove the space like below, add a negative margin or define the font-size on the parent as 0.

Example html:

<div class="wrapper">
    <div class="block"></div><div class="block"></div>
</div>

Example css:

.block { display: inline-block; }

/* Optional zero font for wrapper
   Then reset blocks to normal font-size */
.wrapper { font-size: 0; }
.block { font-size: 16px; }

/* Optional negative margin if you can't
   remove space manually in the html.
   Note that the number is per use case. */
.block { margin-left: -.25em; }

Live demo.

Solution using position: absolute

Another way to do it would be to absolutely position your elements with a relative container. This method has the issue of being less flexible than the others when building responsive layouts and alike.

Example html:

<div class="wrapper">
    <div class="block block-left"></div>
    <div class="block block-right"></div>
</div>

Example css:

.wrapper { position: relative; }
.block { position: absolute; }

.block-left { left: 0; }
.block-right { right: 0; }

Live demo.

---

Why your solution is not working

You are using the text-align css property which will effect inline elements and text but it can't be used to shift the element like you would with the float property.

The text-align property effects the children of the element it is applied to.

Answer 2

Use float: left and float: right instead of text-align