Title: Inconsistent div width after rotating device Last modified: August 21, 2016 --- # Inconsistent div width after rotating device * Resolved [sarahjadesigns](https://wordpress.org/support/users/sarahjadesigns/) * (@sarahjadesigns) * [12 years, 2 months ago](https://wordpress.org/support/topic/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: * ``` ``` * The `nav` container should take up the full width of its parent and the two contained` div`s 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](http://tinypic.com/r/xnripx/8) 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](http://lucky-stars.ca/ptp/cheese-cookies) is a link to my site. I’m using a template based on Simplex. Viewing 7 replies - 1 through 7 (of 7 total) * [Andrew Nevins](https://wordpress.org/support/users/anevins/) * (@anevins) * WCLDN 2018 Contributor | Volunteer support * [12 years, 2 months ago](https://wordpress.org/support/topic/inconsistent-div-width-after-rotating-device/#post-4779977) * Might be worth resolving the issues you have with badly nested & unclosed elements first [http://validator.w3.org/check?uri=http%3A%2F%2Flucky-stars.ca%2Fptp%2Fcheese-cookies&charset=%28detect+automatically%29&doctype=Inline&group=0](http://validator.w3.org/check?uri=http%3A%2F%2Flucky-stars.ca%2Fptp%2Fcheese-cookies&charset=%28detect+automatically%29&doctype=Inline&group=0) * Thread Starter [sarahjadesigns](https://wordpress.org/support/users/sarahjadesigns/) * (@sarahjadesigns) * [12 years, 2 months ago](https://wordpress.org/support/topic/inconsistent-div-width-after-rotating-device/#post-4779980) * Hi Andrew, thanks for catching that. I had a missing `` in the sidebar. * Unfortunately this did not fix my problem. All the other flags from the validator are unrelated to this navigation. * [Andrew Nevins](https://wordpress.org/support/users/anevins/) * (@anevins) * WCLDN 2018 Contributor | Volunteer support * [12 years, 2 months ago](https://wordpress.org/support/topic/inconsistent-div-width-after-rotating-device/#post-4779985) * Do you need that ‘overflow hidden’ style on your nav? * [Andrew Nevins](https://wordpress.org/support/users/anevins/) * (@anevins) * WCLDN 2018 Contributor | Volunteer support * [12 years, 2 months ago](https://wordpress.org/support/topic/inconsistent-div-width-after-rotating-device/#post-4779988) * You know you can debug this stuff through Chrome’s developer toolbar? [http://snag.gy/FVIl9.jpg](http://snag.gy/FVIl9.jpg) * _[https://developers.google.com/chrome-developer-tools/docs/mobile-emulation#enable-emulation-panel](https://developers.google.com/chrome-developer-tools/docs/mobile-emulation#enable-emulation-panel)_ * Thread Starter [sarahjadesigns](https://wordpress.org/support/users/sarahjadesigns/) * (@sarahjadesigns) * [12 years, 2 months ago](https://wordpress.org/support/topic/inconsistent-div-width-after-rotating-device/#post-4779989) * Hello Andrew, * Thanks again. Yes, I did need `overflow: hidden;` but I see now that this is the problem and I can probably work my way around this. * I am aware of this feature in Chrome, but when I set the emulation panel to iPhone 5, I did not get this result. It appeared as I want it to be, not how it actually did on my phone. I’ve not found this panel to accurately replicate what I see on my mobile in the past, may I ask what settings you’re using to get this result? * And thank you again for your help. * [Andrew Nevins](https://wordpress.org/support/users/anevins/) * (@anevins) * WCLDN 2018 Contributor | Volunteer support * [12 years, 2 months ago](https://wordpress.org/support/topic/inconsistent-div-width-after-rotating-device/#post-4779994) * Sure the emulation settings I used were: Device: Apple iPhone 4 User Agent: ( Spoof user agent ticked), “Other” dropdown list selected and then this inputted into the box below: Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_2_1 like Mac OS X; en-us) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8C148 Safari/ 6533.18.5 * Thread Starter [sarahjadesigns](https://wordpress.org/support/users/sarahjadesigns/) * (@sarahjadesigns) * [12 years, 2 months ago](https://wordpress.org/support/topic/inconsistent-div-width-after-rotating-device/#post-4780021) * Hmm, couldn’t get it to work with those settings either, weird. * In any case, I managed to fix my issue, so thank you very much 🙂 Viewing 7 replies - 1 through 7 (of 7 total) The topic ‘Inconsistent div width after rotating device’ is closed to new replies. ## Tags * [fluid layout](https://wordpress.org/support/topic-tag/fluid-layout/) * [iphone](https://wordpress.org/support/topic-tag/iphone/) * 7 replies * 2 participants * Last reply from: [sarahjadesigns](https://wordpress.org/support/users/sarahjadesigns/) * Last activity: [12 years, 2 months ago](https://wordpress.org/support/topic/inconsistent-div-width-after-rotating-device/#post-4780021) * Status: resolved ## Topics ### Topics with no replies ### Non-support topics ### Resolved topics ### Unresolved topics ### All topics