tengo el siguiente código: <div> <div id="opacity"> <h2> 4Coach, Entrena con nosotros!</h2> <div class="left"> <p class="texto_c"> Las ideas que comunica un texto están contenidas en lo que se suele denominar «macroproposiciones», unidades estructurales de nivel superior o global, que otorgan coherencia al texto constituyendo su hilo central, el esqueleto estructural que cohesiona elementos lingüísticos formales de alto nivel, como los títulos y subtítulos, la secuencia de párrafos, etc. En contraste, las «microproposiciones» son los elementos coadyuvantes de la cohesión de un texto, pero a nivel más particular o local. Esta distinción fue realizada por Teun van Dijk en 1980.1 </p> </div> <div class="right"> <video width="800" height="600" controls class="video"> <source src="video/prueba1.mp4" type="video/mp4"> <!--PONER VARIOS FORMATOS PARA ASEGURAR LA REPRODUCCION mp4 compatible con todos los navegadores--> Your browser does not support HTML video. </video> </div> </div> <hr style="clear: both;" /> </div> .left { padding-left: 10px; margin-left: 57px; float: left; position: relative; width: 45%; height: auto; overflow: hidden; } .right { padding-left: 10px; margin-left: 10px; position: relative; float: left; width: 45%; height: auto; overflow: hidden; } #opacity { background: rgba(0, 0, 0, 0.72); top:0; bottom:0; margin: 0; } La estructura del código necesito que se mantenga asi, soy consciente de que hay un div que contiene los demás pero es porque después le daré un diseño a parte. El error que tengo es que solo me sale el la parte opaca en el titulo del div, el texto y el video se quedan completamente fuera, es como si el id=opacity no los englobara.