Two problems here:
In order to emulate quirks mode (ie the mode without a doctype) in standards mode, you need to include the
box-sizing:border-box
style. Note, if you want to support Firefox, you also need the prefixed version (-moz-box-sizing
). Older webkit browser might also need a prefix.You can to apply this to the global selector so that it affects all elements or just to the
span
elements (since those are the ones that need it).The reason you need this is because the spans are set to percentage widths, that you want to add up to 100%. But in default behaviour in standards mode, borders, padding and margin are added outside of the box, so your 50% width actually becomes 50% plus and extra 5px for the border, etc. This is why it overflows off the side.
The
border-box
setting switches it into a mode that works very similarly to how quirks mode worked, ie the borders etc are put inside the box, so that if you ask for a 50% wide box, it will be 50% wide, even when it has a border or padding.The second point is that
display:table
anddisplay:table-cell
don't always work as expected unless you also have another layer of markup between them set asdisplay:table-row
. So if you want to continue using the table layout styles, you should add this.However your layout doesn't really lend itself to a table format anyway; it's a perfect example of where
float:left
should be used. I'm normally not a fan of floats, but this is one case where I would say to use it because it's pretty much exactly the use-case they had in mind when they invented them.
With those points in mind, I've completely rewritten your jsFiddle code using floats and box-sizing, and produced CSS code for you that looks exactly like your intended effect, without any changes to the HTML markup.
Here's the updated fiddle: http://jsfiddle.net/35SSR/5/
Hope that helps.