Why is my DIV falling down the page

Question

I have a vertical menu and when i add content to the page the added content is coming below the menu.I want to prevent the content from falling over.Expecting help from experts here.

In the given example i want demo in same line as my menu.

p, ul, li, div, nav
            {
                padding:0;
                margin:0;
            }
    
            body
            {
                font-family:Calibri;
            }
    
            #menu {
                overflow: auto;
                position:relative;
                z-index:2;
            }
    
            .parent-menu 
            {
                background-color: #0c8fff;
                width:200px;
                
            }
    
            #menu ul
            {
                list-style-type:none;
            }
    
            #menu ul li a
            {
                padding:10px 15px;
                display:block;
                color:#fff;
                text-decoration:none;
            }
    
                #menu ul li a:hover
                {
                    background-color:#007ee9;
                }
    
                #menu ul li:hover > ul {
                    left: 200px;
                    -webkit-transition: left 200ms ease-in;
                    -moz-transition: left 200ms ease-in;
                    -ms-transition: left 200ms ease-in;
                    transition: left 200ms ease-in;
                }
    
                #menu ul li > ul {
                    position: absolute;
                    background-color: #333;
                    top: 0;
                    left: -200px;
                    min-width: 200px;
                    z-index: -1;
                    height: 100%;
                    -webkit-transition: left 200ms ease-in;
                    -moz-transition: left 200ms ease-in;
                    -ms-transition: left 200ms ease-in;
                    transition: left 200ms ease-in;
                }
    
                #menu ul li > ul li a:hover
                {
                    background-color:#2e2e2e;
                }
    .content {
    padding: 12px 12px 12px 12px;
    	font-size: 0.8em;
    	line-height: 1.65em;
    
        border-left: 1px solid #bdc1a3;
            	border-right: 1px solid #bdc1a3;
     background-color:#ffffff
    }
    #dataDiv{
      float: left;border:1px solid #bdc1a3;background-color:#f3f5dc;
    }

<div class="content">   
    <div id="menu" style="overflow:hidden">
        <ul class="parent-menu">
       <li><a href='#'><span>Menu1</span></a>
          <ul>
             <li><a href='#'><span>SubMenu1</span></a></li>
            <li><a href='#'><span>SubMenu2</span></a></li>
           </ul>
            </li>   
       
       <li><a href='#'><span>LOG OUT</span></a></li>
       
    </ul>
       </div>
            <div id="dataDiv"  style="overflow:hidden">
    
    <table>
                    <tr>
                        <td style="background-color: #0C9FFF">
                            &nbsp;Demo
                        </td>
                    </tr>
                    </table> 
                        </div>

Answer 1

Use the style attribute float. https://jsfiddle.net/4g5tLekm/7/

Modify <div id="menu" style="overflow:hidden"> to <div id="menu" style="overflow:hidden;float:left">

Answer 2

Your menu is in a div, which is a block-level element so it takes up the entire width of it's parent element and will push the following content underneath it.

One way to achieve what you're trying to do is to add float: left to your #menu.