javascript - HTML CSS Content div won't float over -

javascript - HTML CSS Content div won't float over -

i trying place content div on both background divs instead code sets on bottom div. below there 2 images show want accomplish , happening.

image 1: want accomplish

image 2: problem

html:

<div class="middle"> <div class="middle_bot"> <div id="content"> <p class="big"> lorem ipsum dolor sit down amet, consectetur adipiscing elit. curabitur tellus felis, sagittis @ neque placerat, laoreet mollis massa. sed et purus mollis, fringilla tellus et, tincidunt eros. ut dolor ipsum, feugiat et </p> </div> </div> </div>

css:

.middle { background-image: url(images/bg_middle.png); /* fallback */ background-image: url(images/bg_middle.png), -webkit-gradient(linear, left top, left bottom, from(#000000), to(#009dca)); /* saf4+, chrome */ background-image: url(images/bg_middle.png), -webkit-linear-gradient(top, #000000, #009dca); /* chrome 10+, saf5.1+ */ background-image: url(images/bg_middle.png), -moz-linear-gradient(top, #000000, #ffffff); /* ff3.6+ */ background-image: url(images/bg_middle.png), -ms-linear-gradient(top, #000000, #009dca); /* ie10 */ background-image: url(images/bg_middle.png), -o-linear-gradient(top, #000000, #009dca); /* opera 11.10+ */ background-image: url(images/bg_middle.png), linear-gradient(to bottom, #000000, #009dca); /* w3c */ /*background-color:blue; background-repeat: repeat; background: url(images/bg_middle.png);*/ height: 40%; width: 100%; } .middle_bot { background-image: url(images/bg_middle2.png); /* fallback */ background-image: url(images/bg_middle2.png), -webkit-gradient(linear, left top, left bottom, from(#000000), to(#ffffff)); /* saf4+, chrome */ background-image: url(images/bg_middle2.png), -webkit-linear-gradient(top, #000000, #ffffff); /* chrome 10+, saf5.1+ */ background-image: url(images/bg_middle2.png), -moz-linear-gradient(top, #000000, #ffffff); /* ff3.6+ */ background-image: url(images/bg_middle2.png), -ms-linear-gradient(top, #000000, #ffffff); /* ie10 */ background-image: url(images/bg_middle2.png), -o-linear-gradient(top, #000000, #ffffff); /* opera 11.10+ */ background-image: url(images/bg_middle2.png), linear-gradient(to bottom, #000000, #ffffff); /* w3c */ /*background-color:blue; background-repeat: repeat; background: url(images/bg_middle2.png);*/ height: 50%; bottom:0; position:absolute; width: 100%; } #content { background: url(images/content2.png); width: 800px; padding: 10px; border: 1px solid #373737; margin: 0; word-wrap: break-word; margin-left: auto ; margin-right: auto ; box-shadow: 2px 2px 2px #000000; }

this simplifies code , replicates layout you're describing:

css:

#navigation{ height:50px; width:100%; color:white; text-align:center; background:black;} #middle{ height:200px; overflow:visible; background:brown;} #content{ margin:0px auto; width:200px; height:300px; position:relative; background:blue;} #middlebottom{ height:200px; background:green;}

html:

<div id="navigation">navigation<div> <div id="middle"> <div id="content"></div> </div> <div id="middlebottom"></div>

and jsfiddle here here, can adjust fit needs.

javascript html css css3 web