Float something left, and center next to it - html

Question

Maybe this is a very stupid question, but I really have no idea.
I want to achieve the following
-----------------------------------------
| TEXT LEFT CENTERED TEXT |
-----------------------------------------
----------------------------------------------------------------------------------
| TEXT LEFT CENTERED TEXT |
----------------------------------------------------------------------------------
-------------------------------
| TEXT CENTERED TEXT |
| LEFT |
-------------------------------
so I want something floated to left, and to center, but the "text left" pushes a bit right the centered text.
I tried two things, both in the fiddle
http://jsfiddle.net/MeGZ6/
<div style="text-align: center; width: 50%; background-color: red;">
<div style="float: left;">left text;</div>
centered text
</div>
<hr>
another attempt:
<hr>
<div style="width: 50%; background-color: yellow;">
<div style="position: absolute; text-align: center;">centered text</div>
text left
</div>
the first one obviously not OK. The second, I cant align text inside the div, and it goes on the other text, instead of linebreak it.
EDIT:
this is what I want to achieve:
http://jsfiddle.net/saLaP/
<table style="background-color: red;" width="100%">
<tr>
<td width="20%" style="background-color: yellow;">left text</td>
<td width="60%" style="text-align: center;">centered text</td>
<td width="20%" style="background-color: green;"></td>
</tr>
</table>
the green column is not needed, its just a "helper". Of course, there is no width for any columns, they supposed to be as width as their content

Answer 1

Set left:0;right:0; to the absolute positioned div
<div style="text-align: center; width: 50%; background-color: red;">
<div style="float: left;">left text;</div>
centered text
</div>
<hr>
another attempt:
<hr>
<div style="width: 50%; background-color: yellow;">
<div style="position: absolute; text-align: center;left:0;right:0;">centered text</div>
text left
</div>
Fiddle Demo

Answer 2

Here is another solution that may work for you:
Fiddle Demo
You just give the container div text-align: center and float the other div left. Since the container is 100% of the width and the text is inline, it will auto center.
HTML / CSS:
<div style="width: 100%;text-align: center; background-color: yellow;">
<div style="float: left;">left text</div>
centered text
</div>

Answer 3

You could make the parent div position: relative and the center div into position: absolute. http://jsfiddle.net/MeGZ6/4/
html:
<div class="parent">
<div class="left">left text</div>
<div class="center">centered text</div>
</div>
css:
.parent{
width: 50%;
position: relative;
float: left;
background: red;
}
.left{
float: left;
}
.center{
position: absolute;
width: 100%;
text-align: center;
}
The problem with this is that, if the left div is too long, it will cross the center div. But you can give the left div a width, so that it won't cross the center div.

Answer 4

I might havent give enough instructions. This is what I want:
http://jsfiddle.net/saLaP/
<table style="background-color: red;" width="100%">
<tr>
<td width="20%" style="background-color: yellow;">left text</td>
<td width="60%" style="text-align: center;">centered text</td>
<td width="20%" style="background-color: green;"></td>
</tr>
</table>
the green column is not needed, its just a "helper".
Of course, there is no width for any columns, they supposed to be as width as their content