HTML adding a barrier for images and other text
<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;Home&lt;/title&gt;
    &lt;meta name="keywords" content="" /&gt;
    &lt;meta name="description" content="" /&gt;
    &lt;body style="background-color:#38a9e3;"&gt;
    &lt;link rel="stylesheet" href="css/bs.min.css"&gt;
    &lt;link rel="stylesheet" href="css/style.css"&gt;
&lt;/head&gt;
&lt;body&gt;


    &lt;div id="main-sidebar"&gt;
        &lt;div class="logo"&gt;
            &lt;a href="x.html"&gt;&lt;h1&gt;x&lt;/h1&gt;&lt;/a&gt;
            &lt;span&gt;x&lt;/span&gt;
        &lt;/div&gt;

        &lt;div class="navigation"&gt;
            &lt;ul class="main-menu"&gt;
                &lt;li class=""&gt;&lt;a href="x.html"&gt;x&lt;/a&gt;&lt;/li&gt;
                &lt;li class=""&gt;&lt;a href="x.html"&gt;x&lt;/a&gt;&lt;/li&gt;
                &lt;li class=""&gt;&lt;a href="x.html"&gt;x&lt;/a&gt;&lt;/li&gt;
                &lt;li class=""&gt;&lt;a href="x.html"&gt;x&lt;/a&gt;&lt;/li&gt;
                &lt;li class=""&gt;&lt;a href="x.html"&gt;x&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
        &lt;/div&gt;

&lt;/div&gt;
    &lt;center&gt;&lt;/center&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>Above is sample code that is for a task bar on a site, i will comment the css code below since putting it here will only cluster the question. How do i make it so on the right of the task bar is a separate area. Right now if i try add an image or write something it goes under it so i have to center everything and resize it which is really annoying. How could i edit the css or html to help me?</p>

<p><strong>Demo:</strong> <a href="http://jsfiddle.net/znu9ukk8" rel="nofollow">jsfiddle.net/znu9ukk8</a></p>