0

Por algún motivo que no alcanzo a entender mi footer, declarado dentro del body, se me muestra fuera!

Body acaba antes que el footer

Y aqui está el footer,fuera del body Footer fuera del body

Mi HTML sigue esta estructura:

Body

  Header
  /Header

  Section main
     Article1
     Article2
  /Section

  Footer
  /Footer

/Body

En mi css he asignado un alto del 20% al footer, un 70% al main, y un 10% al footer.

Por otro lado, el otro problemilla que tengo consiste en que dentro de mi main, tengo 2 articles, uno se muestra bien, y el otro...no

Mi article 1 muestra las cosas que tiene dentro, pero no se ve lo que sería su contenedor. Article1

Mi article 2 se muestra tanto el contenido como el contenedor Article 2

Pues esas son mis dos dudas: por qué el footer me aparece fuera, estando declarado dentro del body, y por qué el contenedor de mi primer article no se ve, teniendo un alto del 50% de su contenedor padre (el main), al igual que el article 2, que sí aparece.

2 respuestas 2

1

Prodias proporcionar el código completo?? De otra manera intenta usar boostrap, con el grid podrias solucionar tu problema. No puedo ayudarte más sin el código css.

probablemente sea por las propiedades del footer

footer {
  clear: both; -> esta no debería ir aquí, si tu aplicaste
  El flotamiento en el header ahi debes aplicar el clear both.
  width: 100%;
  position: fixed;

  }
1
  • Ya está puesto el código CSS @Javier Arturo Hernández Sosa
    – Keka Bron
    Commented el 21 oct. 2017 a las 13:59
0

Mi CSS

* {
margin:0;
padding:0; 
}

body {
background:  white;
}

header {

background: #0496a3;
width: 90%;
height: 10%;
margin-bottom: 4%;
border: 0.125em solid black;
overflow: hidden;
} 

header div {
float: left;
}

.menu {
float: right;
height: 70%;
width: 50%;
}
header nav {
background: #02d1ed;
overflow:hidden;


}

header nav ul {
list-style: none;
}

header nav ul li {
float: left;
}

header nav ul li a {

display: block;
color: black;
text-decoration: none;
font-size: 1.56em;
margin: 0.3125em;
padding: 1.25em;
}


header nav ul li a:hover {
background: #89e3f9;
}

.logo {
margin: 0.79em;
}

.cuenta {
margin: 1.875em;
 }


.main {

height: 70%;
width: 90%;
clear: both;
margin-bottom: 4%;
background: #4cdbd6;
}

.article1 {

height:50%;
width: 100%;
background: #4cdbd6;

}

.article1 div {
float: left;
background:#4cdbd6;
}
.columna1 {
height: 100%;
width: 32%;
}

.columna2 {
 height: 100%;
 width: 32%;
 }
 .user {

  box-sizing: border-box;
  border-radius: 0.25em;
  background-color: white;
  background-image: url('user.png');
  background-position: 0.3125em 0.3125em;
  background-repeat: no-repeat;
  padding: 0.3125em 0.625em 0.3125em 3.125em;
  }

  .calendario {
  box-sizing: border-box;
  border-radius: 0.25em;
  background-color: white;
  background-image: url('calendario.png');
  background-position: 0em;
  background-repeat: no-repeat;
  padding: 0.3125em 0.625em 0.3125em 3.125em;
  }
 .foto {
 box-sizing: border-box;
 border-radius: 0.25em;
 background-color: white;
 background-image: url('folder.png');
 background-position: 0.3125em 0.3125em;
 background-repeat: no-repeat;
 padding:0.3125em 0.625em 0.3125em 3.125em;
 } 


 .columna3 {
  height: 100%;
  width: 32%;
  }

  .mail {
   box-sizing: border-box;
   border-radius: 0.25em;
   background-color: white;
   background-image: url('email.png');
   background-position: 0.3125em 0.3125em;
   background-repeat: no-repeat;
   padding:0.3125em 0.625em 0.3125em 3.125em;
   }

   .imagenperfil {
    clear: both;
   }

   .maria {
    height: 6.25em;
    width: 6.25em;
   border-radius: 50%;
   }

.world {
  box-sizing: border-box;
  border-radius: 0.25em;
  background-color: white;
  background-image: url('world.png');
  background-position: 0.3125em 0.3125em;
  background-repeat: no-repeat;
  padding:0.3125em 0.625em 0.3125em 3.125em;
}


.article2 {
 clear: both;
 height: 50%;
 background: #4cdbd6;

 } 

 .columna1_2 {
  width: 30%;
  height: 100%;
  float: left;

  }

 .columna2_2 {
  width: 68%;
  height: 100%;
  background: #4cdbd6;
  overflow: hidden;
  }

  .columna2_2 div {

   float: left;
   margin: 0.625em;
   padding: 0.1875em;
   }

  input,select {
  margin-bottom: 12px;
  width: 100%;
  padding: 5px;
  box-sizing: border-box;
  border-radius: 5%; 
  }
  label {
  background: #0496a3;
  display: block;
  border-top: 0.15625em solid #003fa5;
  width: 100%;
  }

  footer {
  clear: both;
  width: 100%;
  position: fixed;

  }

  footer div {
  height: 100%;
  width: 25%;
  float: left;
  display: block;
  margin: 1%;
  padding: 1%;
  }

 .copyright_container {
  height: 70%;
  width: 25%;
  border-right: 1px solid black;

  } 

.facebook {
 border-right: 1px solid black;

 }

 .twitter {
  }

  .copyright_icon {
  height: 50%;
  width: 50%;
  max-width: 2em;
  max-height: 2em;

  }

  .facebook_icon {
   height: 50%;
   width: 50%;
   max-width: 2em;
   max-height: 2em;
   }


    .twitter_icon {
     height: 50%;
     width: 50%;
     max-width: 2em;
     max-height: 2em;
    }

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.