css – Aligning two elements differently in same div – Stack Overflow
Answer
There are a few ways to solve your issue the most common one is using the css float property.
Solution using float
In order to achieve a left and right alignment of two elements you can use the css float property.
Example html:
</div>
Example css:
.block-left { float: left; }
.block-right { float: right; }
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 spacing between the blocks. To counter this, either remove the space like below or add a negative margin.
Example html:
</div>
Example css:
.block { display: inline-block; }
/* Optional negative margin if you can't
remove space manually in the html */
.block { margin-left: -.25em; }
Update: Solution using flexbox
You could use the new display: flex to do this as well.
Flexbox is experimental and is only supported by newer browsers (as of this writing 2014), If IE is your friend please stay away from this method.
Example html:
</div>
Example css:
.wrapper { display: flex; }
.block { width: 50%; }
Solution using position: absolute
Another way to do it would be to absolutely position your elements with a relative container.
Example html:
</div>
Example css:
.wrapper { position: relative; }
.block { position: absolute; }
.block-left { left: 0; }
.block-right { right: 0; }
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.
http://stackoverflow.com/questions/15795804/aligning-two-elements-differently-in-same-divThe text-align property effects the children of the element it is applied to.