How can I make 2 divs be next to each other?
<p>I need to make navbar on the left side of the screen and text div to start right next to the navbar. I only managed to make the text div go all the way to the right side of the screen.
So far I have this:</p>

<p>HTML
    </p>

<pre><code>&lt;head&gt;

&lt;link rel = "stylesheet" type = "text/css" href = "styles.css"&gt;
&lt;title&gt;Homepage&lt;/title&gt;

&lt;/head&gt;

&lt;body&gt;
&lt;div id = "header"&gt;
    &lt;h1&gt;Homepage - origins of World Wide Web and the Internet&lt;/h1&gt;
&lt;/div&gt;
&lt;div id = "wrapper"&gt;
    &lt;div id = "navbar"&gt;
        &lt;ul&gt;
        &lt;li&gt;&lt;a class = "active" href="index.html"&gt;HOMEPAGE&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="news.asp"&gt;INTERNET PIONEERS&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="contact.asp"&gt;HTTP&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="about.asp"&gt;TERMINOLOGY&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="about.asp"&gt;REFERENCES&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/div&gt;

    &lt;div id = "text"&gt;
        &lt;h2&gt;World Wide Web&lt;/h2&gt;

    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>CSS:</p>

<pre><code>#header {


width: 97%;
  height: 70px;
  background: black;
  position: relative;
  border: 5px solid white;  
  margin: 20px;
}

#header:after {
  content: '';
  position: absolute;
  top: -15px;
  left: -15px;
  right: -15px;
  bottom: -15px;
  background: #600202;
  z-index: -1;
}

#header h1 {
    font-family: Arial;
    color: white;
    text-align: center;
}



#navbar {
    padding-left: 8px;
    margin:5px;
}

#navbar ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 15%;
    background-color: #f1f1f1; 
    position: fixed; 
    overflow: auto;
    border: 5px solid black;
    border-radius: 3%;
    font-family: Arial;
    font-weight: bold;
}

#navbar li a {
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
}

#navbar li a:hover {
    background-color: #555;
    color: white;
}

#navbar li a.active {
    background-color: #600202;
    color: white;
}


#navbar li {
    text-align: center;
    border-bottom: 5px solid black;
}

#navbar li:last-child {
    border-bottom: none;
}

#text {
    border:1px solid black;

}
</code></pre>