Yet another “why won't my divs float” (in jquery-mobile)?

Question

I'm trying to make some html code mobile-first, so I've stuck an @media to test for "desktop" widths (arbitrarily set to 45em in my sass at the moment). The idea for the two divs ( #picture-block and #question-block ) in question is:

$desktopwidth: 45em
#question-block, #picture-block
  width: 100%
@media (min-width: $desktopwidth)
  #question-block, #picture-block
    width: 50%
    float: left

Despite clicking around in my code inspector, I can only get my two divs in question to float left side-by-side when I kill both width properties (50% and 100%). I'm confused by this, because I thought display: block would have been the default, and I don't understand why the width property would affect the float . I'm using the jquery-mobile framework, but I can't see how it would be interfering in the code inspector.

I've created a codepen link to try to replicate the problem. My question: what do I need to do to the css to get the picture-block and question-block divs to float next to each other for desktop widths?

Answer 1

In the codepen, you also have a 1px border around the blocks. This causes the total width of each to be 50% plus 2 pixels. So two of them won't fit side by side in a 100% container!

Possible solutions:

• either give them box-sizing:border-box to include the border width in the width
• or, set the width as calc(50% - 2px)

(but not both.)