2 fiex and 1 auto columns

Hello

This is my code

<ul style="list-style:none;margin:0;padding:0;">
    <li style="display:table-cell;background:#72B0B6;">
        <div style="width:150px;">left</div>
    </li>
    <li style="display:table-cell;background:#ff0000;">
        <div>dddasdasdas asdas as asd as as asd as asd as asas das dasd asdad asdas d asd asd asd ad sfds f fsfsfs fsf sdf sdf sf sf sdfsd fs fsdf sdf sd</div>
    </li>
    <li style="display:table-cell;background:#ccc;">
        <div style="width:150px;">right</div>
    </li>
</ul> 

HTML:

I want to have 2 columns with fiexed width and one auto (full) width in the center. My above code works great in FF and opera but it dies in IE because of table-cell. Does anybody know any solutions?

 

You could try using a container with 3 float divs.

<style type="text/css">
	#container {
		text-align: center;
	}

	#left {
		width: 150px;
		float: left;
		background:#72B0B6;
	}

	#center {
		background:#ff0000;
	}

	#right {
		float: right;
		width: 150px;
		background: #ccc;
	}
</style>

Code (markup):

<div id="container">
	<div id="right">
    	text
	</div>
	<div id="left">
    	text
	</div>
	<div id="center">
    	text
	</div>
</div>

Code (markup):

Hope that helps