DIV's contiguos... ¿comorl?
11 seguidores
Hola,
es una pregunta chorra, pero es que no consigo aclararme.
Quiero saber si hay alguna forma sencilla con CSS (sin especificar valores ni tamaños absolutos) para poder escribir algo tal que así:
<code><div>bloque1</div><div>bloque2</div><div>bloque3</div></code>
y de forma que quede algo así como tres celdas de tabla contiguas. Como una fila de una tabla, vamos :)
El equivalente "tablificado" sería
<code><tr><td>bloque1</td><td>bloque2</td><td>bloque3</td></tr></code>
¿Me explico?
gracias a los gurús y sabios amables que me contesten!
II GemInIs II
Pués quizás una alternativa:
[code
]<dl>
<dt>
<dd></dd>
</dt>
</dl>
[/code]
<dt> es como header... y lo formateas con css al gusto incluido el spacio que desees con los <dd> :)
Según lo que necesites, puedes dividir el <dd> con <span> o crear nuevos <dd> ...
El uso de <span> ahora mismo me tiene en cierta contradicción, porque a hilo de otra conversación, me comentan que un elemento inline no puede tener un width ya que se contradeceria con su naturaleza ... y eso ahora mismo me tiene en ascuas ... ;)
zigotica
de hecho, depende del significado de los bloques, igual lo mas correcto es que sean 3 items de una lista... sin mas pistas...
hartum
que digo yooooooooo(tarde por cierto), para la primera cuestion que planteo sole, en lugar tanto float y tanta leche porque no utiliza etiquetas <span> que pa' eso son ¿no?
joseflorido
Existen otras maneras a parte del div vacio y del hr (o br que tambien se suele utilizar). La mas conocida consiste en flotar el elemento contenedor, pero claro esto no siempre es posible por motivos del diseño de la pagina.
Otra forma, es la propuesta no hace mucho por holly john en position is everything, que hace uso de la propiedad :after y juega un poco con IE para solventar sus carencias de soporte css2, lo podeis ver en: http://www.positioniseverything.net/easyclearing.html
En el caso de utilizar div vacio o hr, yo tambien me decanto por hr :)
saludos
cbp
ok, tomo nota txuma, chas gracias :)
orange
Pues si ... yo normalmente utilizo un div, pero más porque lo veo como una especie de hack que por otra cosa (con lo que no me comia la olla casi nada) pero lo del hr me mola más, así será para la próxima ...
txuma Plus
cbp, no lo he probado, pero así a botepronto debería funcionar (aunque me temo que va a depender mucho de como maneja los floats cada navegador). Pero si semánticamente es correcto hacer una separación yo creo que mejor utilizar el HR, que así además te evitas una clase.
cbp
¿y no sería mejor poner el "clear:both" al siguiente elemento en el flujo del código? así no habría que meter ningún elemento para limpiar los float.
Josh
tiene mas sentido meter un <hr /> aunque el div y span son las dos unicas etiquetas sin valor semantico, son meros contenedores de html
ikgoru
lo veo, lo veo....
gracias.
zigotica
sastamente
kemie
en mi opinion, semanticamente tiene mas sentido usar un hr, ya que funciona como una division entre una sección de la página y la siguiente.
un div vacio no tiene ningún valor semántico.
ikgoru
Sergi la solución del hr es tan solo por no hacer un div vacio, lo cual no encaja en la filosofía por crear un div solo por causas de presentación?
O hay alguna más?
sole
Super thanks a los dos!!
Funciona muy bien. Mira que no haber pensado en el atributo float... aish qué verde estoy en CSS!!
Más preguntas, en el próximo capítulo ... continuará ;)
zigotica
ese css esta bien, pero la solucion para limpiar los float no. yp pondria algo como:
<code>
div {
float: left;
width: 32.9%;
}
hr {
clear: both;
visibility: hidden
padding:0px;
margin: 0px;
height: 0px;
}</code>
y luego en el html, despues de los 3 div, pondria un <hr>
Josh
por ejemplo:
div {
float: left;
width: 32.9%;
}
y se comportaran APROXIMADAMENTE como quieres. Te recomiendo poner un ultimo div abajo de esos tres con algo asi:
<div style="clean: both; overflow: hidden"></div>
para que tu tres columnas no se sobrepongan a otros elementos.
Con lo facil que es con td's ...