Skip to main content

tengoTengo 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;

}

  .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;
    
    }
<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>
    
  

La estructura del código necesito que se mantenga asi, soy consciente de que hay un divdiv 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 divdiv, el texto y el videovídeo se quedan completamente fuera, es como si el id=opacityid=opacity no los englobara.

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.

Tengo el siguiente código:

  .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;
    
    }
<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>
    
  

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 vídeo se quedan completamente fuera, es como si el id=opacity no los englobara.

Origen Enlace

Error css id con elementos float, separa el contenido del div

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.