Ver Mensaje Individual
  #1 (permalink)  
Antiguo 31/10/2010, 18:56
roylugones
 
Fecha de Ingreso: enero-2005
Mensajes: 150
Antigüedad: 15 años, 1 mes
Puntos: 1
Columnas mal alineadas UL LI

Quiero hacer con UL - LI, dos columnas con contenido en mi web. El problema que tengo es que la columna donde haya más contenido, está bien alineada en la parte de arriba del todo. Pero la otra columna, la mas reducida de contenido, pues la alinea abajo del todo. Y realmente me interesa todo lo contrario, como es lógico. Que todo esté alineado arriba.

Lo puedo solucionar poniendo FLOAT:LEFT pero si lo hago, tengo otro problema aparte. Tengo un fondo general de la web, que según voy "construyendo" la página, va formándose ese fondo hacia abajo. Pero si pongo el float:left, ya no me sirve.

El CSS

Código:
ul#contenido-principal{
  position:relative;
  margin:20px 0px 0px 20px;
  padding:0px;
  list-style-type:none;
  display:inline;
}

ul#contenido-principal li{
  position:relative;
  display:inline;
  margin-right:20px;
  padding:0px;
}
----

HTML

Código:
<ul id="contenido-principal">
  <li>
     <div id="noticia-principal">         
        Esto es un ejemplo, esto es un ejemplo,  esto es un ejemplo,  esto es un ejemplo,  esto es un ejemplo,  esto es un ejemplo,  esto es un ejemplo,  esto es un ejemplo,  esto es un ejemplo,  esto es un ejemplo,  esto es un ejemplo,  esto es un ejemplo,  esto es un ejemplo,  esto es un ejemplo,  esto es un ejemplo,  esto es un ejemplo.   
     </div>
   </li>
   <li>
     <div id="predicciones-portada">
        Esto es un ejemplo, esto es un ejemplo,  esto es un ejemplo,  esto es un ejemplo,  esto es un ejemplo,  esto es un ejemplo,  esto es un ejemplo,  esto es un ejemplo,  esto es un ejemplo,  esto es un ejemplo,  esto es un ejemplo,  esto es un ejemplo,  esto es un ejemplo,  esto es un ejemplo,  esto es un ejemplo,  esto es un ejemplo. Esto es un ejemplo, esto es un ejemplo,  esto es un ejemplo,  esto es un ejemplo,  esto es un ejemplo,  esto es un ejemplo,  esto es un ejemplo,  esto es un ejemplo,  esto es un ejemplo,  esto es un ejemplo,  esto es un ejemplo,  esto es un ejemplo,  esto es un ejemplo,  esto es un ejemplo,  esto es un ejemplo,  esto es un ejemplo.      
     </div>	  
   </li>
</ul>
Muchas gracias de antemano.