[SOLUCIONADO] Div ancho automático

[xfrancis]

Hola a todos! Tengo el siguiente problema: Estoy haciendo un menu, cinco elementos con link mas uno vacio para rellenar. Los primeros cinco elementos expanden su ancho segun el tamaño del texto pero el ultimo hace lo mismo y yo necesito que rellene todo el espacio que queda. Agradezco de antemano la ayuda.

[g3kdigital]

¿Que estructura o maquetación html estas usando?

Lo primero que se me ocurre, es que no estas usando listas y solo links, pero es muy dificil de saber sin ver el código. Puedes ponerlo?

[xfrancis]

Hola g3kdigital. Tengo esto:

Código HTML:

<div id="menu">
  <div id="inicio" class="menu">inicio</div>
  <div id="nosotros" class="menu">"nosotros"</div>
  <div id="servicios" class="menu">"servicios"</div>
  <div id="galeria" class="menu">"galeria"</div>
  <div id="contacto_menu" class="menu">"contacto_menu"</div>
  <div class="menu" id="blanco">Colocar aquí el contenido para  id "blanco"</div>
</div> 

Código:

.menu {
	float: left;
	padding-right: 30px;
	padding-left: 30px;
	background-image: url(imagenes/png-bg.jpg);
	height: 68px;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #292821;
	border-right-color: #080808;
	border-bottom-color: #080808;
	border-left-color: #292821;
}

[g3kdigital]

Tu estructura si bien no es una conocida y por cuestiones de semantica o accesibilidad no la recomiendo (sobre todo por el exceso de "div" innecesarios) Esto no quiere decir que sea imposible de usar y por ejemplo para lograr tu objetivo te recomiendo:

Primero: asignale a tu contenedor con el id "menu" un cambio en su modelo de caja para transformarlo en una tabla usando "display: table;" y además un ancho del 100%.

Código CSS:

#menu
{
  display: table;
  width: 100%;
}
 

Segundo: a todos los div anidados asignales un "display: table-cell;" de esta manera trataran automáticamente unos tamaños relativos con el fin de llenar toda la estrucutura. Puedes usar el selector "#menu>div" o la clase que tu usas ".menu".

Código CSS:

.menu
{
  display: table-cell;
}
 

Tercero: Habiendo hecho esto, solo queda decirle al ultimo div o celda, que deberá ocupar siempre un ancho que ocupe el resto del contenido, por lo que le podemos especificar "width: 100%;" de esta forma conseguirás tu objetivo.

Código HTML:

#blanco
{
   width: 100%;
}
 

Puse un ejemplo de como se vería en este http://codepen.io/g3kdigital/pen/wDocC

Por cierto, francamente la estructura del html es un poco extraña para un menu.

Actualmente no conozco una forma de que solo con html o css se calcule un espacio cuando no hay ninguno de los siguientes 3 factores bien definidos: Estructura, Modelo de caja o Medidas (ya sean en pixeles, porcentajes, em, etc).

Por lo que te invito a estudiar un poco estructuras html (en google hay montones de ejemplos) mira este por ejemplo http://codepen.io/g3kdigital/pen/oKDlf

[pzin]

Como te han dicho no es esa la estructura ideal para un menú, ya que suele ser más indicado usar una lista desordenada.

Pero bueno, lo pongas así o bien, podrías hacer algo así para que ese último elemento ocupe el espacio restante:

Código CSS:

div#blanco {
  float: none;
  overflow: hidden;
}
 

A ver si este verano podemos empezar a recomendar el uso de FlexBox. <3

[xfrancis]

Gracias g3kdigital y pzin. Lo he resuelto con su ayuda!