[SOLUCIONADO] Conseguir que nav tengo un ancho del 100%

[mblascog]

Buenas,
He creado menú, con un ancho del 100%.
Este menú tiene 6 opciones:
- 5 opciones con un ancho del 12%
- 6a. opción quisiera que fuera el resto.

Partiendo que tengo asignado un margin-right del 1%, entiendo que la última columna debería ser del 39,5%, ya que la 6a. opción quisiera no tener margin-right,pero no lo consigo.

El código css es este:

Código CSS:

#menu {
    float:left;
    width:100%;
}
#menu nav {
    font:bold 1.1em 'Helvetica';
    padding-top:2px;
}
#menu nav ul {
    list-style-type:none;
    background:#367A7B;
}
#menu nav ul li#opcioActiva{
    background:#035A5B;
}
#menu nav ul li {
    float:left;
    height:40px;
    line-height:40px;
    background:#5CACAD;
    width:12%;
    text-align:center;
    margin-right:1px;
}
#menu nav ul li a{
    text-decoration:none;
    color:#FFF
}
#menu nav ul li#bandera {
    width:39.4%;
    text-align:right;
    margin-right:-1px;
}
 

Quizás me estoy liando, pero no sé cómo corregir este pequeño error, justo a la derecha de la bandera, que muestro en la siguiente imagen:

[pzin]

Puedes hacerlo que sea automático y que el último elemento ocupe lo que sobre. Para ello sólo tienes que dejar de flotar ese último elemento y añadir un overflow:

Código CSS:

#menu nav ul li:last-child {
  float: none;
  display: inline-block;
  overflow: hidden;
}
 

El display es para que te respete la altura y eso.

[mblascog]

Gracias pzin,
Quizás lo tenga todo mal planteado, con tu sugerencia consigo que la barra del menú sea del 100%, pero la última opción aparece alineada a la izquierda, del mismo tamaño que las otras.
Me gustaba la separación de las opciones con el margen de fondo blanco, con el cambio, lógicamente, aparece del color de la barra.

Haciendo tu cambio la cosa me queda así:


Gracias.

[pzin]

Bueno, te falta quitarle también el ancho que hereda.

Código CSS:

width: auto;
 

[mblascog]

Gracias pzin, pero width:auto coge el tamaño de la bandera.
Queda así:

[pzin]

Pues algo andarás haciendo mal, porque funcionar funciona bien.

[mblascog]

Gracias pzin, supongo que sí, que algo estaré haciendo mal ya que tal como tu me sugieres no me funciona.
Pero lo he solucionado de esta forma. Crees que está mal?

Código CSS:

#menu {
    float:left;
    width:100%;
    background:#5CACAD;
}
#menu nav {
    font:bold 1.1em 'Helvetica';
    padding-top:2px;
}
#menu nav ul {
    list-style-type:none;
    background:#367A7B;
}
#menu nav ul li#opcioActiva{
    background:#035A5B;
}
#menu nav ul li {
    float:left;
    height:40px;
    line-height:40px;
    background:#5CACAD;
    width:12%;
    text-align:center;
    border-right:1px solid white;
}
#menu nav ul li a{
    text-decoration:none;
    color:#FFF
}
#menu nav ul li#bandera {
    border:0;
    float:right;
    text-align:right;
    margin-right:1%;}
 

Gracias

[pzin]

Iniciado por mblascog

Crees que está mal?

Tú sabrás. No es lo que preguntabas desde luego…

[mblascog]

Gracias pzin, quizás no me haya explicado bien, pero en mi primer mensaje justo pido como poder corregir esto. Adjunto imagen precisamente para mostrar la pequeña indentación a la derecha