html - Two DIV's side by side in smaller DIV -

html - Two DIV's side by side in smaller DIV -

i'm trying have 2 div's side side within smaller div overflow:hidden; i'd expect both div's side side , have of it's content hidden caused parent div smaller in width. instead lastly div moves under other div tho both have float:left;.

html:

<div id="wrapper"> <!-- wrapper --> <div id="nav"> <!-- nav --> </div> <!-- /nav --> <div id="container"> <!-- container --> </div> <!-- /container --> </div> <!-- /wrapper -->

css:

#wrapper { float:left; height:960px; width:540px; background-color:#eeeeee; overflow:hidden; } #nav { float:left; width:460px; height:960px; background-color:red; } #container { float:left; width:540px; height:960px; background-color:green; }

this effect want:

if want 2 elements side-by-side, think have add together additional "wrapper" element of kind surround #nav , #container elements. (overflow set auto can see elements next each other.)

example:

class="snippet-code-css lang-css prettyprint-override">#wrapper { float: left; height: 960px; width: 540px; background-color: #eeeeee; overflow: auto; } #wrap { width: 1000px; } #nav { float: left; width: 460px; height: 960px; background-color: red; clear: } #container { float: left; width: 540px; height: 960px; background-color: green; } class="snippet-code-html lang-html prettyprint-override"><div id="wrapper"> <!-- wrapper --> <div id="wrap"> <!-- new wrapping element --> <div id="nav"> <!-- nav --> </div> <!-- /nav --> <div id="container"> <!-- container --> </div> <!-- /container --> </div> </div> <!-- /wrapper -->

html css