Hi all,
I'm sure this is a basic question to those of you who work in HTML and CSS regularly.
I have two pieces of text, both need to appear on the SAME line - one needs to be left aligned, and the other needs to be centered, regardless of how much text is in the left-aligned block (obviously while the length of the left-aligned text does not extend over the halfway mark).
To make this easier to understand and test, I have included a sample. In my sample, I have what I need, but on 2 lines instead of the same line.
Please repost the working sample if you find a solution.
Thanks.
<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>