CSS Bloque alineado fijo abajo

[tpzurdo]

Hola, necesito alinear abajo un bloque con diagrama líquido de esta manera.



¿Cómo puedo hacer?

Mi instinto fue probar esto pero para nada funciona. ¿Me ayudan por favor?

Código HTML:

<style>
html, body{margin:20px;padding:20px;}

#mesatotal {
	position:fixed;
	bottom:0px;
	display:block;
}

#mesaizquierda {
    width:141px;
	height:302px;
}

#mesacentro {
	background-image:url(images/mesa-centro.jpg);
	height:302px;
	width:auto;
}

#mesaderecha {
    width:141px;
	height:302px;
}

</style> 

Muchas gracias

[C2am]

Y cual es el html donde se aplican esos estilos?

[pzin]

Un colega con pestañitis.

Hay cierta manía con pensar que width:auto hace magia.

Cabe deducir cómo tienes el HTML, pero no está nunca de más ponerlo, que nunca se sabe.

Yo pondría todo de un contenedor, y le daría un padding lateral igual al ancho de los elementos laterales y estos últimos ponerlos con posición absoluta a los lados. Luego invocamos al antes odiado y ahora amado antiguo modelo de caja de IE con border-sizing para amenizar la velada y más o menos debe de salir.

Código CSS:

#mesacentro {
  position: fixed;
  bottom: 0;
  box-sizing: border-box;
  padding: 0 141px;
  width:100%;
  height:302px;
}
 
#mesaizquierda {
  position: absolute;
  left:0;
  width:141px;
  height:302px;
}
 
#mesaderecha {
  position: absolute;
  right: 0;
  width:141px;
  height:302px;
}
 

Código HTML:

<div id="mesacentro">
  <div id="mesaizquierda"></div>
  <div id="mesaderecha"></div>
   Hola caracola
</div>
 

[tpzurdo]

Mira vos... muy buena .... voy a probar así muchas gracias.

Lo que hice se parece mucho a una tabla para los que las extrañamos un poco. Y pude usar mi adorado with: auto;
Por ahora tengo esto pero voy a probar tu alternativa porque es poco ortodoxo creo.

Código HTML:

<style>
#mesafija{
	position:fixed; 
	bottom:0px;
	display: table;
	width: 90%; 
	margin: 0 auto;
	height:302px;
	margin-left:5%;margin-right:5%;
}
	
#mesatotal{
	display: table-row;
}

#mesaizquierda,#mesaderecha{
  width: 141px; 
  display: table-cell;
}

#mesacentro{
	background-image:url(images/mesa-centro.jpg);
	width: auto;
	display: table-cell;
	padding: .5em;
}

#mesaizquierda{
background-image:url(images/mesa-izquierda.png);
}

#mesaderecha{
background-image:url(images/mesa-derecha.png);
}

</style> 

Código HTML:

<div id="mesafija">
  <div id="mesatotal">
    <div id="mesaizquierda">
    </div>
    <div id="mesacentro">
    </div>
    <div id="mesaderecha">
    </div>
  </div>
</div>