html - Div width and issues on iPhone

Question

I have this HTML I am testing with:

<div>

    <div style="width: 940px; background-color: red;">

        <div style="width: 50%; background-color: green;">

            <div>Sick of spending endless time waiting on your computer?</div>

        </div>

    </div>

</div>

This works fine on a desktop or on an iPhone.

But when I simply add another div to it like this:

<div>

    <div style="width: 940px; background-color: red;">

        <div style="width: 50%; background-color: green;">

            <div>Sick of spending endless time waiting on your computer?</div>

        </div>

        <div style="width: 50%; background-color: orange;">

            <div>Sick of spending endless time waiting on your computer?</div>

        </div>

    </div>

</div>

The text in the 50% div starts wrapping on an iPhone. I tested it in Safari and Chrome on an iPhone.

I am confused why adding another div would cause this when they are the same width.

Any help with this would be great.

Thanks!

Answer 1

I figured this out myself. My page was loading a jQuery UI style sheet from the theme roller. Something in that style sheet was causing this issue. When I removed that style sheet everything worked fine.