using css to position divs

Problem

I know there are so many questions like this already on stackoverflow and else where around the web. But none has helped me.

Currently,

I have this markup:

<div class="wrapper">
    <div class="navigation">
    </div>
    <div class="innerWrapper">
    </div>
</div>
  1. navigation is a vertical left side list
  2. innerWrapper is the content area. It needs to overlap the navigation area by a margin of -10px.
  3. the wrapper needs to wrapper both div and expands according to the height and width of the innerWrapper.

CSS:

.wrapper {
   position: relative;
   min-width: 40em;
   margin: 0;
   overflow: hidden;
   padding: 10px 100px;
   border: red 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: red 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:

  1. The wrapper is not wrapping the 2 divs rather the width defaults to a 100% and height swallows the both divs

How do I fixed this, so the wrapper div still wrappers both divs; Both navigation and innerwrapper still side by side and innerwrapper overlaps navigation, and when window is minimized all divs stay in place?

Thanks for the help!

Final Fix:

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

Thanks to User and Guillermo.

Problem courtesy of: capiono

Solution

Try this:

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

You should still modify some code, but It should match your 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: red 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;
}
Solution courtesy of: Guillermo

Discussion

As i got your requirement

I have created a jsFiddle demo here: [http://jsfiddle.net/jje41mm2/5/][1]
if ur website is responsive then change width in percentage instead of px & let me know if
u want any change in this,i will happy to help

  http://jsfiddle.net/jje41mm2/5/
Discussion courtesy of: Ankit Agrawal

I´m seeing two things: Your CSS contains at least a mistake when referencing .innerWrapper, you´re calling it .content-wrapper

Have you cleared the floats? It's a common issue the one that you´re experiencing, and this article may help you to fix it: http://css-tricks.com/all-about-floats/

Regards,

Guillermo

Discussion courtesy of: Guillermo

This recipe can be found in it's original form on Stack Over Flow.