html - using css to position divs -

html - using css to position divs -

i know there many questions on stackoverflow , else around web. none has helped me.

currently,

i have markup:

<div class="wrapper"> <div class="navigation"> </div> <div class="innerwrapper"> </div> </div> navigation vertical left side list innerwrapper content area. needs overlap navigation area margin of -10px. the wrapper needs wrapper both div , expands according height , width of innerwrapper.

css:

.wrapper { position: relative; min-width: 40em; margin: 0; overflow: hidden; padding: 10px 100px; border: reddish solid 1px; margin-bottom: 20px; } .navigation, .innerwrapper { margin: 0; overflow: hidden; min-height: 40em; position: absolute; float: left; } .navigation { width: 140px; margin-left: 0; border: reddish solid 1px; } .innerwrapper { left: 16.2em; border-radius: 2.00em; -webkit-border-radius: 2.00em; -moz-border-radius: 2.00em; border-radius: 1.00em; background-color: white; border-top: 2px inset rgba(0, 0, 0, 0.2); border-bottom: 2px outset rgba(255, 255, 255, 0.2); min-width: 900px; margin-top: 0; padding: 15px; clear: both; }

fiddle

issue:

the wrapper not wrapping 2 divs rather width defaults 100% , height swallows both divs

how fixed this, wrapper div still wrappers both divs; both navigation , innerwrapper still side side , innerwrapper overlaps navigation, , when window minimized divs remain in place?

thanks help!

final fix:

http://jsfiddle.net/jje41mm2/7/

thanks user , guillermo.

try this:

http://plnkr.co/edit/7bgmvzjnlrdwotnyduc2?p=preview

you should still modify code, should match idea.

.wrapper { position: relative; min-width: 40em; margin: 0; padding: 0; border: orange solid 1px; margin-bottom: 20px; } .navigation, .innerwrapper { margin: 0; float: left; position: relative; } .navigation { width: 10%; margin-left: 0; border: reddish solid 1px; height: 400px; } .innerwrapper { border-radius: 2.00em; -webkit-border-radius: 2.00em; -moz-border-radius: 2.00em; border-radius: 1.00em; background-color: white; border-top: 2px inset rgba(0, 0, 0, 0.2); border-bottom: 2px outset rgba(255, 255, 255, 0.2); margin-top: 0; padding: 15px; width: 80%; margin-left: -10px; } .clearfix:after { content: "."; visibility: hidden; display: block; height: 0; clear: both; }

html css css3