Posicionamento CSS - Problema Flutuante para Esquerda e Centrada
Pergunta
Tenho certeza de que esta é uma pergunta básica para aqueles que trabalham em HTML e CSS regularmente.
Eu tenho dois pedaços de texto, ambos precisam aparecer na mesma linha - é preciso ficar alinhado e o outro precisa ser centrado, independentemente de quanto texto está no bloco alinhado à esquerda (obviamente enquanto o comprimento do O texto alinhado à esquerda não se estende pela marca intermediária).
Para facilitar o entendimento e o teste, incluí uma amostra. Na minha amostra, tenho o que preciso, mas em 2 linhas em vez da mesma linha.
Por favor, repasse a amostra de trabalho se encontrar uma solução.
Obrigado.
<html>
<head>
<title>Alignment Test</title>
<style>
body {background-color: #E6E6E6;}
#reference {width: 100%;
border: solid 1px navy;}
#half1 {width: 50%;
text-align: right;
border-right: dotted 1px navy}
#container {width: 100%;
text-align: center;
border: solid 1px navy;}
#floatLeft {float:left;
border: dotted 1px green;
background-color: #D0F5A9;}
#centered {width: 100%;
border: dotted 1px red;
background-color: #F5F6CE;}
</style>
</head>
<body>
<div id="reference">
<div id="half1">Middle of container --> </div>
<div id="half2"></div>
</div>
<div id="container">
<div id="centered">This text should be centered
<div id="floatLeft">This text should be left aligned</div>
</div>
</div>
</body>
Solução
<div style="text-align:center;position:relative">
Centered
<div style="position:absolute;left:0;top:0">Left</div>
</div>
Outras dicas
Y. A solução de Shoham funciona. Aqui está outro, que lida com o conteúdo de embalagem de maneira mais graciosa (não permite a sobreposição entre o centro e a seção esquerda), mas que requer alteração da ordem dos itens na marcação:
<div style="text-align: center; overflow: auto;">
<div style="float: left; text-align: left;">left</div>
centered
</div>
(O text-align: left
pode não fazer a diferença, por exemplo, se não houver largura especificada e nada dentro tem uma largura inerente, como uma imagem.)