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

Answer 2

simply add float:left.to your style

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

Answer 3

You have a few options here to consider. The best choice would be to use a flex container to surround the the elements which will by default render them side by side.

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

Without a container you can just leave them to their default display which would be as block elements and float them left using float: left;.

<div style='height:100px;width:100px;background:red;float:left;'></div>
<div style='height:100px;width:100px;background:blue;float:left;'></div>

You can also change their display to be inline-block which have properties of both inline and block elements. MDN has exhaustive documentation about the display property.

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