Tree floating divs height 100%, one fixed width - middle overlows

[jusuf]

I want to have a div with fixed width (1000px) in the center, one div floats left and fills the background, another one fills the background on the right side. All have 100% height. \[code\]<div id="left"></div><div id="right"></div><div id="main"> Text</div>\[/code\]The css:\[code\]html, body{height:100%;min-height:100%;width:100%;padding:0;margin:0;}#left{position: relative;width:50%;height:100%;top:0;left:-500px;float:left;}#right{position:relative;width:50%;height:100%;top:0;right:-500px;float:right;}#main{width: 1000px;margin:auto;}\[/code\]The problem is that content breaks out of the middle div. It is still in the div, but under the other ones.How can i fix it, that the content is shown on top of the middle div?For better imagination: http://codepen.io/anon/pen/eluGt