[Ovillo] Cuestion. Como lo haríais.

[Jose Insausti]

Hola a todos.

Estoy montando una administración en CSS y tengo un ligero problema.

 

Tengo un listado de noticias tipo.

 

FECHA + TITULO + ICONOS EDITAR/BORRAR

 

Ahora esta dispuesto de la siguiente forma.

 

/* el HTML */>

 

<div id="listado">

 

<p><span class="fecha">31/01/07</span>

   <span class="titulo">Título de la noticia breve.</span>

   <span class="iconos"><a href="#borrar"><img src="images/ico_borrar.gif"
alt="Borrar" /></a><a href="#editar"><img src="images/ico_editar.gif"
alt="Editar" /></a></span>

</p>

<p><span class="fecha">31/01/07</span>

   <span class="titulo">Título de la noticia tan largo que ocupa más de una
línea, imaginad que ocupa 2 ó 3 y entonces no cabe en el contenedor del
título que he creado.</span>

   <span class="iconos"><a href="#borrar"><img src="images/ico_borrar.gif"
alt="Borrar" /></a><a href="#editar"><img src="images/ico_editar.gif"
alt="Editar" /></a></span>

</p>

 

</div>

 

/* la CSS */

 

#listado {

       float:right;

       width:544px;

       padding:10px;

       margin-bottom:10px;

}

#listado span.fecha {

       float:left;

       width:60px;

       color:#666;

       text-align:left;

}

#listado span.titulo {

       float:left;

       width:400px;

       

}

#listado span.iconos {

       float:right;

       width:80px;

}

#listado span.iconos img {

       float:right;

       padding:0 2px;

}

 

 

Como veréis en la hoja CSS, le he puesto un width a los 3 porque quiero que
la noticia si tiene más de una línea se mantenga en su sitio y la fecha y
los iconos a la derecha.

De momento esto funciona y no hay problema.

 

EL PROBLEMA:

 

Si aplico un width:80px a los iconos y por programación quiero añadir más
iconos al tener un ancho fijo me los flotaría o saltaría hacia abajo.

Me interesa que si por programación meto más iconos, tipo “ampliar”,
“destacar”, etc., ese span se amplíe y el de noticias (que ahora tiene un
width fijo) se contraiga para adecuarse.

 

Espero haberme explicado correctamente.

 

Un saludo y muchas gracias por adelantado. 

 

Jose Insausti. Disenia.