alineacion con css

Hola a todos,

Llevo horas intentando centrar un menú, y he probado de todo y no hay forma... os pongo una imagen de la estructura que lleva y ahora os explico:

[img] Uploaded with ImageShack.us[/img]

Bien... tengo la img1 que quiero q esté alineada al margen izqda del navegador (esto si lo he conseguido).
Luego la img2 (que esté alineado a la derecha)

Luego hay un bloque en medio de listas, con 4 <li> que quiero que se mueva como un bloque y se quede centrado en medio del navegador a iguales distancias de img1 y 2. Y que los 4 se queden así juntitos (pq he probado a modificar con padding, margin etc... y no, quiero que todos los de el bloque central queden juntitos).

Pues bien, he probado con position absolute, pero claro si redimensionas el navegador ya no están bien colocados, tienen que "fluir" y estar siempre uno a la derecha otro en centro y otro a la izqda... entonces al probar con relative, se me descoloca todo, el 2 se me va debajo del 1... o tb probé otras cositas (q ya ni recuerdo de tantos cambios) y el float:left del bloque central me dejaba de funcionar y se ponían todos en vertical...

En fin... que no doy con el "punto"... y mira que a simple vista parece fácil... pues aquí llevo horas y no los consigo situar...

A alguien se le ocurre como tiene q ir el html y el css para que funcionen???

Mil gracias!!

con algo así debería solucionarse:

Código HTML :

<div id="left">LEFT</div>
<div id="right">RIGHT</div>
<ul id="center">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>

Código HTML :

#left{float:left}
#center{margin:0 auto; overflow:hidden}
#right{float:right}
#center li{width:50px; border: 1px solid black; margin:5px; float:left; list-style:none}
#left, #right, #center{width:250px; border: 1px solid black; padding: 5px}

suerte

Gracias tribak! Aunque me sigue dando algunos problemas con el code que me das, y no sé como resolverlo, si fueras tan amable de explicarme y poder solucionarlo...

Te explico el problema que sigue ocurriendo... En principio las listas, cada una es una imagen, pero no son todas del mismo tamaño, en realidad son así:

[img] Uploaded with ImageShack.us[/img]

Pero usando el code q me das... consigo posicionarlo correctamente si... pero se me ven así :

[img][/img]

Por si con la imagen no se ve claro, te explico con palabras:
IMG1- se estira un poco (no se nota mucho, pero se estira)
IMG2 - se estira demasidado la imagen y se distorsiona por este estiramiento
IMG4 e IMG5- al ser más pequeños que la 3 y la 6, se colocan encima de la 3...

Esta es la modificación que he hecho a tu code para ajustarlo a mi diseño:

Código HTML :

#izquierda{float:left} 
#centro{margin:0 auto; } 
#derecha{float:right} 
#centro li{width:50px;  margin:5px; float:left; list-style:none} 
#izquierda, #derecha, #centro{width:250px;  padding: 5px} 

En la última línea modificando el width consigo "varios estiramientos" de los elementos, pero yo no quiero q se estiren ninguno, sólo que se posicionen su sitio. (La pág está diseñada para 1024x768 pero se tiene q ver bien en mayores resoluciones y en su sitio). He ido modificando los width q me das, por si encontraba el equilibrio, pero no doy con ello...

¿Puedes ayudarme?

Gracias...

el problema son las medidas, pero intenta esto

Código HTML :

<div id="content">
<div id="left">1</div>
<div id="right">2</div>
<ul>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</div>

Código HTML :

#content { float:left; width:100%; overflow:hidden; position:relative; clear:none}
#content ul { clear:left; float:left; list-style:none; margin:0; padding:0; position:absolute; left:50%; top:0}
#content ul li {display:block; float:left; list-style:none; margin:0; padding:0; position:relative; right:50%}
#content ul li img { display:block; margin:0 0 0 1px; padding:3px 10px}
#left{float:left}
#right{float:right}

Perfecto!! Mil gracias!!

pues no tan perfecto, pero funciona