Estirar div al ancho completo (si hay espacio disponible)

i'm currently working on a tumblr theme, but got stuck on the page navigation. The html for "Previous" and "Next" Buttons or only rendered, if they are available. So there is no next button on the first page and no previous button on the last page. and this is where i want the according single button to stretch to 100% width. I could do this in javascript but it's not an option at all since the template shall work without javascript too.

el html se ve así:

<div id="navigation">
<a href="#" id="prev" style="width:476px; float:left;" class="button_normal"><p>Prev</p></a>
<a href="#" id="next" style="width:476px; float:right;"class="button_normal"><p>Next</p></a>
</div>

CSS:

.button_normal {
text-align: center;
opacity: 0.55;
height: 30px;
line-height: 30px;
background: white;
font-size: 13px;
font-weight: 100;
color: #646464;
border: 1px solid #646464;
text-decoration: none;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
margin-bottom: 10px;
}

#navigation{
clear: both;
width: 100%;
}

width of the parent div is 960px, so there shall be a 8px margin between the two buttons. I tried fixing it with min-width and width: 100% auto; but couldn't really figure out how to make it.

Gracias de antemano.

preguntado el 09 de marzo de 12 a las 17:03

2 Respuestas

Puede hacer lo siguiente:

  1. Agrega una position:relative to your parent container
  2. Create a new class called "full-width" and in it have

    position: absolute;
    left:0px;
    right:0px;
    
  3. Agregar la clase full-width to the corresponding button

respondido 09 mar '12, 17:03

You can use table display styles.

/* add these properties to your stylesheet */
#navigation { display:table; }
.button_normal { display:table-cell; }

// remove the inline styles from your anchors
<div id="navigation">
    <a href="#" id="prev" class="button_normal"><p>Prev</p></a>
    <a href="#" id="next" class="button_normal"><p>Next</p></a>
</div>

Ejemplo: http://jsbin.com/unuwuh/2

respondido 09 mar '12, 17:03

The only problem with this style is it isn't supported in IE 7 or IE 6. I'm not sure if Janik Lipke cares though. - xbrady

Great, this seems to work. Quite easy but I didn't that property at all. The margin in the middle (8px) still seems to be an Issue for me. - Janik

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.