Tablas VS DIV + CSS

El uso de tablas se abandonó hace mucho.

Lo de las tablas era una ñapa que se hizo para poder realizar diseños complejos para los que HTML no estaba pensado, pero hoy en día CSS le da mil vueltas a ese sistema y hacerlo va en contra de todas las recomendaciones del W3C.

No hay versus ninguno...

Los tablas para datos tabulados y los divs para maquetar.

Puedes estar acostumbrado a ponerte toda la vida los calzoncillos en la cabeza, pero esa no es su función.

No entiendo tu ejemplo.

Tener la info en 3 divs es como tenerlas en 3 tds, al respecto de tenerlas "agrupadas" o "separadas"

Si necesitas un padre que englobe todo, puedes hacer algo como:

<div>
	<div></div>
	<div></div>
	<div></div>
</div>

*No hay manera de insertar código legible en MV ?

#6 muy fácil:

<div style="display:table;width:700px;margin: 0 auto;">
    <div style="width:150px;float:left;">Menu izquierda</div>
    <div style="width:400px;float:left;">Contenedor central</div>
    <div style="width:150px;float:left;">Menu derecha</div>
</div>

Si se te ralla, es por los márgenes por defecto de los divs, todo es cuestión de ajustarlo un poco.

Si después de dos años haciendo webs con tablas, no has visto que problemas tienen ... :S

@ #9

Olvidate de "display: table" en IE lt 8, y flotar elementos sin hacer algún tipo de clearfix con su contenedor, es altamente peligroso.

@ #8 Gracias por lo de code, no lo sabia/recordaba

Yo lo haría así:

CSS

#wrapper{
	width: 700px;
	margin: 0 auto;
	overflow: hidden; *zoom: 1; *overflow: visible;
	background: #f00;
}

#sidebar1{
	float: left;
	width: 150px;
	background: #a0f;
}

#sidebar2{
	float: right;
	width: 150px;
	background: #af0;
}
#mainContent{
	background: #fff;
}

HTML

<div id="wrapper">
	<div id="sidebar1">s1</div><!-- sidebar1-->
	<div id="sidebar2">s2</div><!-- sidebar2-->
	<div id="mainContent">mC</div><!-- mainContent -->
<div><!-- wrapper-->	

Para rallarte menos, y que siga el mismo orden que si fuesen tablas, puedes hacerlo asi:

<div id="wrapper">
	<div id="sidebar1">s1</div><!-- sidebar1-->
	<div id="mainContent">mC</div><!-- mainContent -->
	<div id="sidebar2">s2</div><!-- sidebar2-->
<div><!-- wrapper-->

a lo cual tendrías que añadir al css anterior:

#mainContent{
	background: #fff;
	float: left;
	width: 400px;
}

y #sidebar2 podría ser float left o float right indistintamente.

Edit: si, uso el hack del asterisco para arreglar internet explorer 7 y 6, cosa que hace que no valide el CSS.

#13 sin el display table el div 'wrapper' tendrá un height de 0, esta era la única razón por la cual lo he puesto.

#20 doy MUCHA fe de eso

#20 de ahi el overflow: hidden en el contenedor padre.

Funciona igual de bien, y se aplica en el div que toca, no "en el siguiente". Creo que es más lógico.

Edit: además de lógico, es totalmente indispensable para la reutilización de código.

Por otro lado, clear both no se puede utilizar siempre, ya que hay veces que no quieres que el div en cuestión haga un clear, sólo que pille el height adecuado, es otra razón para apostar por overflow: hidden;