CODEWITHSUNDEEP
htmlcss
antonpug
antonpug

Reputation: 14306

How do I align two span elements one to the left, the other one to the right?

I have two <span> elements:

<span style="margin-right:auto;">©2012 XYZ Corp. All Rights Reserved.</span>
<span style="margin-left:auto;">Built with <a href="http://www.wordpress.org/">Wordpress</a> and hosted by <a href="http://www.mediatemple.net/">(mt)</a> in California.</span>

I want the first <span> to be on the left of the page and the second <span> to be on the right side, regardless of page width (so I can't use fixed positioning).

What CSS can I use to do this?

Upvotes: 29

Views: 118671

Answers (1)

paulcol.
paulcol.

Reputation: 3000

The css variable float is used to position your elements.

The options are:

float:left;
float:right;
float:none;

<span style="float:left;">©2012 XYZ Corp. All Rights Reserved.</span>

<span style="float:right;">Built with <a

Here is working example:

<span style="float:left; color: red;">©2012 XYZ Corp. All Rights Reserved.</span>

<span style="float:right; color: blue;">Built for example</span>

Upvotes: 50

Related Questions