Har ett litet problem som jag inte kommer på hur jag ska lösa.
Har en tabell som är uppbyggd så här:

<table Cellpadding="0" Cellspacing="0" width="100%">
    <tr>
        <td id="LogoTop" height="20">
            <table cellpadding="0" Cellspacing="0" width="100%">
                <tr>
                    <td class="head-left-start"></td>
                    <td class="head-left" nowrap="nowrap">Aquamaniacs - Nord Poolen - Boden</td>
                    <td class="head-left-bar"></td>
                    <td class="head-right" nowrap="nowrap">&nbsp;</td>
                    <td class="head-right-bar"></td>
                </tr>
            </table>
        </td>
    </tr>
</table>

CSS koden till det ser ut så här:

		.head-left, .head-right {
			font-family: Verdana;
			font-size: 10px;
			font-weight: bold;
			vertical-align: center;
			padding-left: 5px;
		}

		.head-left-start {
			width: 2px;
			height: 20px;
			background-color: #505F7E;
			background-image: url(_gfx/head-left-start.gif);
			background-repeat: no-repeat;
		}

		.head-left {
			color: #000000;
			height: 20px;
			background-color: #505F7E;
			background-image: url(_gfx/head-left.gif);
			background-repeat: repeat-x;
		}

		.head-left-bar {
			width: 8px;
			height: 20px;
			background-color: #505F7E;
			background-image: url(_gfx/head-left-bar.gif);
			background-repeat: no-repeat;
		}

		.head-right {
			color: #FFFFFF;
			height: 20px;
			background-color: #505F7E;
			background-image: url(_gfx/head-right.gif);
			background-repeat: repeat-x;
		}

		.head-right-bar {
			width: 5px;
			height: 20px;
			background-color: #505F7E;
			background-image: url(_gfx/head-right-bar.gif);
			background-repeat: no-repeat;
		}

Nu återgår vi till problemet.
.head-left tar över hela tabellen om man inte har något i .head-right.
Då tar den bara över halva.

Jag vill att .head-left ska anpassa sig efter texten som är och .head-right ska ta över allt annat.
Hur gör jag detta med CSS?

Går det eller måste jag använda mig av HTML?