Ayuda - Float y cambio de altura

[aviacioncr]

Saludos,

Estoy intentando crear una tabla para mostar los temas de mi foro utilizando CSS, en lugar de tablas html.

Mi problema es que tengo que fijarle una altura fija al div para que se muestre correctamente, de lo contrario se desordena el contenido. No me es práctico tener una altura fija ya que el contenido puede variar y no se va a mostar como se debe.

Ejemplo de cómo de ve

Utilizando un HEIGHT de 60px


Sin utilizar HEIGHT fijo


Utilizando HEIGHT 30px


Código que utilizo
CSS:

Código:

#foro-temasContenedor {
	font-family: Arial;
	font-size: 12px;
	margin: 0px auto 10px auto;
	text-align: left;
	width: 780px;
}

/****************************************************************************************/
/* Cabecera de los temas */
#foro-temasCabecera {
	text-align: center;
	background-color:#666;
	color:#FFF;
	height:15px;
}

#foro-temasIcono {
	margin: 0px 1px 0px 0px;
	float:left;
	width: 30px;
	border-right-width: thin;
	border-right-style: dotted;
	border-right-color: #CCC;
}

#foro-temaTema {
	margin: 0px 1px 0px 0px;
	float:left;
	width: 290px;
	border-right-width: thin;
	border-right-style: dotted;
	border-right-color: #CCC;
}

#foro-temaRespuestas {
	margin: 0px 1px 0px 0px;
	float:left;
	width: 80px;
	border-right-width: thin;
	border-right-style: dotted;
	border-right-color: #CCC;
}

#foro-temaVistas {
	margin: 0px 1px 0px 0px;
	float:left;
	width: 60px;
	border-right-width: thin;
	border-right-style: dotted;
	border-right-color: #CCC;
}

#foro-temaCreado {
	margin: 0px 1px 0px 0px;
	float:left;
	width: 150px;
	border-right-width: thin;
	border-right-style: dotted;
	border-right-color: #CCC;
}

#foro-temaUltimaRespuesta {
	float:left;
	width: 150px;
}

/* Temas */
#foro-temasLista {
	padding: 3px 0px 3px 0px;
	text-align:center;
	color:#000;
	height: 30px;
}

#foro-temasLista p{
	padding-bottom: 20px;
	padding-top: 0px;
	margin: 2px 0px 2px 0px;
}

#foro-temasLista a {
	font-weight: bold;
	text-decoration: none;
	color: #369;
}

.claro {
	background-color:#E5E5E5;
}

.oscuro {
	background-color:#CDCDCD;
}

.izquierda {
	text-align: left;
}

.pequeño {
	font-size: 10px;
}

HTML

Código HTML:

<div id="foro-temasContenedor">
  <div id="foro-temasCabecera">
  	<div id="foro-temasIcono">&nbsp;</div>
    <div id="foro-temaTema">Tema</div>
    <div id="foro-temaRespuestas">Respuestas</div>
    <div id="foro-temaVistas">Vistas</div>
    <div id="foro-temaCreado">Creado</div>
    <div id="foro-temaUltimaRespuesta">Ultima respuesta</div>
  </div>
 
  <div id="foro-temasLista" class="oscuro" >
  	<div id="foro-temasIcono"><p>[X]</p></div>
    <div id="foro-temaTema" class="izquierda"><p><a href="a">El primero tema de la categoria 2, con texto para llenar la segunda línea</a></p></div>
    <div id="foro-temaRespuestas"><p>0</p></div>
    <div id="foro-temaVistas"><p>0</p></div>
    <div id="foro-temaCreado" class="pequeno"><p>17/03/2010, 06:35:57 PM</p></div>
    <div id="foro-temaUltimaRespuesta" class="pequeno"><p>17/03/2010, 06:35:57 PM</p></div>
  </div>
 
  <div id="foro-temasLista" class="claro" >
  	<div id="foro-temasIcono"><p>[X]</p></div>
    <div id="foro-temaTema" class="izquierda"><p><a href="a">Otro para la 2</a></p></div>
    <div id="foro-temaRespuestas"><p>0</p></div>
    <div id="foro-temaVistas"><p>0</p></div>
    <div id="foro-temaCreado" class="pequeno"><p>17/03/2010, 06:36:03 PM</p></div>
    <div id="foro-temaUltimaRespuesta" class="pequeno"><p>17/03/2010, 06:36:03 PM</p></div>
  </div>
 
</div> 

He intentado de varias maneras pero no logro que la "columna" se expanda hacia abajo con el texto.

Agradecería cualquier ayuda, tengo poca experiencia con CSS y me gustaría aprender a resolver este tipo de problemas.

Gracias de antemano

[flpms]

Lso datos son datos en tablas. Segun la web semantica nos es error crear una pagina con tablas desde que los datos sean datos tablados.
entonces haga com tablas esto.

[aviacioncr]

Gracias flpms,

Estoy considerando hacerlo con tablas, pero de todas maneras me gustaría saber cual es mi error con el css o cúal sería la manera adecuada de hacerlo.

[Trypat]

Las tablas se usan para mostar datos en forma de tablas y un foro casi por definicion tiene forma de tabla, asi que es lo que debes usar.

Puedes probar un min-height o incluso clear ( que me perdone alguien que igual con lo de clear la estoy metiendo hasta el fondo, es solo una idea )

[aviacioncr]

Trypat,

El min-height me da el mismo resultado.
El clear si me ayudó a que no se vea desordenado el texto, pero de todas maneras el fondo de las filas no se ve bien.


Así se ve en FireFox

Vi la guía de migración a XHTML+CSS en este foro y me llamó la atención de la idea de poder hacerlo sin tener que usar tablas. Entiendo que por el tipo de información está bien mostrarlo como una tabla, pero quisiera aprender más.

Saludos y gracias

[flpms]

Para que vos pueda conocer mejor intentas lo sitio zen-garden.
Y tambien lo sitio arudi.net para que puedas tener las sugestiones del CSS

[CraToS]

Ojo esto aviacioncr, te puede servir:

http://extensions.joomla.org/extensions/external-contents/news-a-feeds/rss-readers

[aviacioncr]

CraToS no entendí cual ejemplo querías que viera.

Saludos

[flpms]

Bien para que sea solucionado tuyo problema haga una tabla con los datos no es vas cometer uno error.

Para que vos pueda conocer lo xhtml y tambien lo CSS utilza-se de lo sitio

http://w3schools.com

Si vos estudiar bien muy pronto lograr hacier bine lo que desea.

[aviacioncr]

Gracias por la ayuda, he logrado solucionar el problema.

Como dijo Trypat, usando el clear funciona cómo debería.

Agregué un div al final de lo que serían las columnas, con la propiedad clear:both.
Con eso ya no es necesario ni tener un min-height.

Si a alguien le interesa el código completo con gusto lo comparto.

Saludos