0

Quiero saber como colocar elementos debajo de un div que dentro tiene otro div que sobresale por el borde inferior. Ya que este "hijo" cubre parte de lo que estoy colocando por debajo. El codigo html y Css es el siguiente:

    <div class="col">
      <div id="padre-banner">
        <img id="banner" src="#" alt="baner-imagen">
        <div id="padre-profile">
          <img id="profile-pick" class="rounded-circle" src="profile-pick.png" alt="foto-de-perfil">
        </div>
    </div>

En Css:

#profile-pick{
    width: 100%;
    height: auto;
 }
#padre-profile{
    position: absolute;
    top:78%;
    left: 10%;
    border-width: 0.3em black;
    width: 20%;
    background-color: orange;
}
#banner{
    width: 100%;
    height: auto;
    border: solid;
    border-width: 1px;
    margin-top: 1em;
}
#padre-banner{
    position: relative;
    background-color: blue;
}

Como el contenedor de la imagen (padre-profile) sobresale por debajo de su contenedor padre (padre-banner). Cualquier texto que quiera poner por debajo de "padre-banner" aparece tapado por "padre-profile". Intente de varias maneras pero no encuentro una solución eficaz.

1 respuesta 1

0

Solo dale un margin bottom al padre-banner, te falto un div que cierre en tu html.

 #padre-banner{
        position: relative;
        background-color: blue;
        margin-bottom: 15px;
 }
 <div class="col">
    <div id="padre-banner">
      <img id="banner" src="#" alt="baner-imagen">
      <div id="padre-profile">
        <img id="profile-pick" class="rounded-circle" src="profile-pick.png" alt="foto-de-perfil">
      </div>   
    </div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt quidem eum vitae doloribus quae, temporibus suscipit dolor laboriosam ad quas reprehenderit eligendi voluptate error. Dignissimos dicta dolorum repellat eius sequi.</p>
 </div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.