How do I put a scrollable div next to a non-scrollable div using CSS?

Tags: css,css-float,css-position

Problem :

Here is a fiddle of what's going on:

Basically, I'm trying to have my content not go under the vertical navigation. I tried all the different types of position on .content and also tried float: right; which didn't work either.

What is the semantically correct, most efficient way, to execute this?

Current CSS:

div.nav {
float: left;
width: 150px;
margin-right: 20px;
background-color: rgba(102, 153, 204, 1);
height: 100vh;
position: fixed; }

.content {
overflow: auto; }

.wrapper {
width: 880px;
margin: 0 auto;
text-align: left; }

Current HTML:

<div class="wrapper">

    <div class='nav'>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>

    <div class='content'>
Lots of text...

Solution :

add this

.content {
    overflow: auto;

    CSS Howto..

    How to make overflow blocks working well ()

    How to do scale to fit in my case?

    How to make a div with a circular shape? [duplicate]

    Yahoo.widget.Editor - How to configure font size of text

    How do I download many of the same pictures fewer times with html, css, jquery, etc.?

    How can I get these Bootstrap column divs to be uniform length inside of a well?

    How to add link without ruining transition CSS/HTML

    How to position a CSS triangle using ::after?

    How to design a full width bar with HTML and CSS [closed]

    How to abstract this single case (showing text field based on selection of a drop down list) into a general function in jQuery?

    (CSS) How to Shorten CSS code

    How to make width grow slowly when I add element?

    how to hide and show a div that is inside of a form using only javascript and css

    How Do I Make Validation and Error Messages Come Up Using Javascript?

    How to remove dropdown active color in bootstrap 3.0?

    How to position two divs one on each other at the bottom of parent?

    How to precompile scss to a single css file in webpack?

    how to change css styles of custom jquery widget?

    How to make this layout more responsive in CSS?

    CSS, how to add picture in the corner of every columns

    How to hide a class on specific page using css

    How to change css for active link based on the hashtag

    How to cancel CSS effect in Responsive Website Footer menu?

    CSS - How to make
    side by side not wrap when user make browser size changing?

    how to keep table 100% wide?

    how to create a fullscreen website design?

    How to center list of links in a straight line. CSS

    How to remove css class with some effect using jQuery?

    How to Identify Microsoft Edge browser via CSS?

    How to align two svg masked images on the same line