My footer leaves the body, and an article is not shown

Question

My footer leaves the body, and an article is not shown

Navigation

#1 by (1 votes)
#2 by (0 votes)

0

For some reason that I can not understand my footer, declared inside the body, it shows me out!

And here is the footer, outside the body

My HTML follows this structure:

Body

  Header
  /Header

  Section main
     Article1
     Article2
  /Section

  Footer
  /Footer

/Body

In my css I have assigned a high of 20% to the footer, 70% to the main, and 10% to the footer.

On the other hand, the other problem I have is that inside my main, I have 2 articles, one is good, and the other ... no

My article 1 shows the things you have inside, but you do not see what your container would look like.

My article 2 shows both the content and the container

Well those are my two doubts: why the footer appears to me outside, being declared inside the body, and why the container of my first article is not seen, having a 50% height of its parent container (the main one ), like article 2, which does appear.

html5 html css3 css

asked by Keka Bron 21.10.2017 в 13:07

source

2 answers

0

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

answered by 21.10.2017 в 15:58

Problem with MongoClient in C # .NET Problem with query to table with inner join

score 1 · Accepted Answer

Prodias provide the full code ?? Otherwise try to use boostrap, with the grid you could solve your problem. I can not help you anymore without the css code.

probably because of the properties of the 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;

  }