CSS - Display centered text with another side-aligned text

Question

I own a div 70% page width with centered text.

I need to put a sentence in the right corner but in the same line as the original text, without disturbing the centralization of the original text.

#mainContent {
    width:70%;
    margin:auto;
}
#bottomContent {
    z-index:-1;
    height:50px;
    text-align:center;
    color:#999;
    font-size:10px;
    background: #e8e8e8; /* Old browsers */
    background: -moz-linear-gradient(top,  #e8e8e8 0%, #ffffff 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  #e8e8e8 0%,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  #e8e8e8 0%,#ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e8e8e8', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
}
.RodapeDireita {
    font-size:10px;
    z-index:1;
    float:right;    
}

<div id="mainContent">
      <!--Aqui vai o restante do site-->
      <div id="bottomContent">
        <span style="font-size:12px">
            Nome da empresa<br />
            Endere&ccedil;o da empresa<br />
            Telefone da empresa
        </span>
        <span class="RodapeDireita">
            &copy;Copyright da Empresa
        </span>
    </div>
</div>

In the above case, how can I make sure that the company copyright does not "push" the company phone to the left?

Thank you.

Answer 1

If you can use one position:absolute; can use to align only the div "copyright" on the side. But be careful, because in smaller resolutions, it may be 'above' the centered text.

It is important to note that you should set your div father with a position: relative; so that the absolute is "relatively" positioned to the parent div.

#bottomContent {
    z-index:-1;
    height:50px;
    text-align:center;
    color:#000;
    background: #e8e8e8;
    position:relative;
}

Then just apply the positioning on div you want to align on the side by defining the distance from the side and the distance from below.

.RodapeDireita {
    font-size:10px;
    z-index:1;
    bottom:5px;
    right:5px;
    position:absolute;
}

Take this example: https://jsfiddle.net/nugx9vso/3/

Note: I changed your html from <span> for <ul> as it looks better to structure your centered column, and also removed the gradient to better view.