Inconsistent div width after rotating device

I have a fluid layout with page navigation on the bottom. I get my navigation to display correctly on all platforms I’ve been able to get my hands on, but there’s an inconsistency in iOS’ Safari.

Safari does not display the navigation correctly in portrait orientation, but **if I rotate it to landscape mode, and then to portrait again it’s fine**.

The HTML for my navigation looks like this:

<nav id="nav-below">

    <div class="nav-previous">
        <a href="#" rel="prev">Previous link</a>
    </div>

    <div class="nav-next">
        <a href="#" rel="next">Next link</a
    </div>						

</nav>

The nav container should take up the full width of its parent and the two contained divs should take up 50% of nav. Here is my (simplified) CSS:

nav {
    display: block;
    overflow: hidden;
}

#nav-below {
    margin:2em 9% 0;
    padding:1em 0 0;
    border-top:4px double #e2f7ed;
}

.nav-previous {
    float: left;
    width: 50%;
}

.nav-next {
    float: right;
    text-align: right;
    width: 50%;
}

This displays correctly in IE, Firefox, and Chrome, no matter the viewport size on the initial page load. But in the iPhone’s Safari, the width of the nav container is less than half the width of its parent container until I’ve rotated my screen to landscape orientation and back. I’ve uploaded an image here to show you what it looks like.

Does anyone know what could be causing this and/or how to fix this? If it helps, here is a link to my site. I’m using a template based on Simplex.