CSS - Display centered text with other text aligned to the side

Question

CSS - Display centered text with other text aligned to the side

Navigation

#1 by (2 votes)

1

I have a div of page width and 70% text width.

I need to put a phrase 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's copyright does not "push" the company's phone to the left?

Thank you.

css

asked by anonymous 11.11.2015 / 21:40

1 answer

How do you leave the div always with the maximum page size? How do I get information from a function and distribute it in a view?

score 2 · Accepted Answer

If you can use a position:absolute; you can use it to only align the div of "copyright" on the side. But be careful, because in smaller resolutions, it can stay 'over' the centralized text.

It's important to note that you should set your% co_of% parent with a div so that position: relative; 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 the absolute that you want to align on the side, defining the distance from the side and the distance from the bottom.

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

See this example: link

Note: I've moved your html from div to <span> because it's better to structure your central column, and I've also removed the gradient for better visualization.