Outer div background is overlapping inner div

Question

I am trying to add the inner div to be seen correctly just that the outerdiv overlaps it, tried with position absolute, but not working, also want the html to remain as it is, because I need the height of the outer div to adjust to the height of the inner div.

JsFiddle

http://jsfiddle.net/ms1v8pkv/

HTML

<div class="outer-div">
    <div class="inner-div">
        <input type="text" value="enter value here" />        
    </div>
</div>

CSS

.outer-div {
    background: #445b22 none repeat scroll 0 0;
    height: 114px;
    opacity: 0.35;
    width: 100%;
}
.inner-div {
    display: block;
    margin: 0 auto;
    z-index: 2;
    width: 70%;    
}
input {
    margin-top: 50px;
    background-clip: padding-box;
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    color: #444;
    font-size: 12px;
    font-weight: 400;
    outline: medium none;
    padding: 10px;
}

Answer 1

The outer div does not "overlap" your inner div, it's just, that the css property opacity which you declare on the outer div is inherited to all child elements. There is nothing you can do about this.

What you instead probably want, is a semi-transparent background color on the parent div, which could be achieved with rgba colors:

/* for demonstration: */
.outer-div {
    /* replace hex value here with the rgba value below */
    background: #445b22 none repeat scroll 0 0;
    /* opacity: 0.35; <- remove this, it becomes the value for the a channel */
    /* hex #445b22 is rgb(68,91,34) */
    background-color: rgba(68,91,34,0.35); /* <- the a channel is the opacity */
}

so in clean code it would be:

.outer-div {
    background: rgba(68,91,34,0.35) none repeat scroll 0 0;
}

EDIT: short explanation on hex to rgb conversion:

your color:
#44 5b 22 <- hexadecimal values
 r  g  b  
 68 91 34 <- decimal values

white:              black:
#FF  FF  FF         #00 00 00
 r   g   b           r  g  b
 255 255 255         0  0  0

EDIT: just for nonsense fun a one-liner converter function from hex to rgb to be executed on the console...:-D

window.prompt("RGB color:",function(string){return "rgb("+(string.match(/^#?(?:(\w\w)(\w\w)(\w\w)$)|(?:(\w)(\w)(\w)$)/).splice(1).filter(function(k){return k!==undefined}).map(function(o){ o=(o.length===1)?o+o:o;return Number.parseInt(o,16)}).join())+")"}(window.prompt("Define hex color","#bada55")))