I have two `<div>`s surrounding an `image` in same row, but when I add the image the right `<div>` drops below. 

I've tried `float`, `display:inline-block` and even styling the `HTML`tags, but it didn't help.

Please help me out.
Here's my `code`:

```
  <title>Hair by Michelle</title>
<body>
<div class="all">
    <div class="navbar">

        <img class="pic1" src="https://scontent-lga1-1.xx.fbcdn.net/hphotos-xaf1/v/t1.0-9/598668_4520542180477_68371292_n.jpg?oh=024b6348716dcf01475a40d0576671e7&oe=5640E0C7" alt="Photo of Michelle>

        <h1>Hair By Michelle</h1>

        <ul>
            <li class="home"><a href="#">home</a>
            </li>
            <li class="about"><a href="#">about</a>
            </li>
            <li class="availability"><a href="http://hairbymichelle.simplybook.me/sheduler/manage/">appointments</a>
            </li>
            <li class="contact"><a href="#">contact</a>
            </li>
        </ul>
    </div>
</div>
<div class="container">
    <div class="hours">
            <h1>Hours</h1>

        <p>Tuesday: 12pm-7pm</p>
        </br>
        <p>Wednesday: 12pm-7pm</p>
        </br>
        <p>Thursday: 10am-7pm</p>
        </br>
        <p>Every other Saturday: 10am-7pm</p>
    </div>
    <div class="services">
            <h1>Services</h1>

            <h4>Women's Haircut $32</h4>

        </br>
            <h4>Men's Haircut $22</h4>

        </br>
            <h4>Full head color $50</h4>

        </br>
            <h4>Full highlights $70</h4>

        </br>
            <h4>Color toning $15</h4>

        </br>
            <h4>Facial waxing $12</h4>

    </div>
</div>

```

Ignore the result area, just paste it in an editor.