How float a div wrapper in html/css? - html

Question

I have a vertical NavBar which is in a wrapper. It works fine but the rest of my content follows below it. I'd like to have the Vert Narbar on the Left maybe 20% width, and the content on the Right. I'll need to use a Clear for my footer.
The Navbar CSS [omitting some unecessary lines] is:
div.wrapper {
margin: 60px auto auto 8px;
width: 220px;
}
p {
/*4spaces*/
font-family: georgia;
font-size: 1rem;
line-height: 25px;
margin: 24px 0;
text-align: center;
}
nav.vertical {
border-radius: 14px;
box-shadow: 0 0 10px rgba(0, 0, 0, .15);
overflow: hidden;
text-align: center;
}
nav.vertical>ul {
list-style-type: none;
}
nav.vertical>ul>li {
display: block;
}
nav.vertical>ul>li>a {
background-color: rgb(157, 34, 60);
text-shadow: 0 1px 1px rgba(0, 0, 0, .1);
text-transform: uppercase;
transition: all .35s ease;
/*4spaces */
}
nav.vertical>ul>li>a:hover {
background-color: rgb(114, 51, 98);
cursor: pointer;
}
nav.vertical>ul>li>div {
background-color: rgb(255, 255, 255);
}
nav.vertical>ul>li>div>ul {
list-style-type: none;
}
nav.vertical>ul>li>div>ul>li>a {
background-color: rgb(255, 255, 255);
border-bottom: 1px solid rgba(0, 0, 0, .05);
color: #333331;
display: block;
font-size: 1.1rem;
padding: 10px 0;
text-decoration: none;
transition: all 0.35s linear;
}
nav.vertical>ul>li>div>ul>li:hover>a {
background-color: lightBlue;
color: rgb(255, 255, 255);
padding: 10px 0 10px 50px;
}
<!-- 4 spaces -->
<div class="wrapper">
<nav class="vertical">
<ul>
<li>
Category 1
<div>
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
</div>
<!-- 4 spaces -->
</li>
<li>
Category 2
<div>
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
</div>
</li>
</ul>
</nav>
<!-- 4 spaces -->
</div>
<div style="padding-left:20px">
<h1>Website Content Stuff</h1>
</div>
<!-- main content -->
<p>Ipsorum pro loekum text that we all hate</p>
I should mention that I got the Navbar code online from Adam-Bray

Answer 1

You have to add a float on your .wrapper div, because it's a block element so it takes the full width and moves the content below it