Can't Get Divs to render Side By Side

Question

Here's the fiddle: http://jsfiddle.net/vhcFw/

Here's the code:

<div style='display:block-inline;height:100px;width:100px;background:red;'></div>
<div style='display:block-inline;height:100px;width:100px;background:blue;'></div>

Essentially, I cannot get the divs to render side- by side (especially when using inline styling). I realise this is a simple mistake, but I cannot figure out how to fix it. Thanks in advance.

Answer 1

Simple syntax error.

Use display:inline-block not display:block-inline

Updated jsFiddle here

See MDN - display properties.

---

Alternatively, you could also float the elements.

jsFiddle here