Stretch div to full width (if space available)

Question

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.

the html looks like this:

<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.

Thanks in advance.

Answer 1

You can do the following:

1. Add a 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. Add the class full-width to the corresponding button

Answer 2

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>

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