Issue with Footer styling

Question

I am currently building a website and my code has been fine until now. I have added a footer to my webpage and it shows. However, when I add a height it doesn't change at all. Instead it changes the footer to the colour white. I have also tried using a div and a section (just for testing purposes) but it is still the same result. Any help would be appreciated! Here is the code:

</head>

<body> 

  <header>
    <img     src="http://i300.photobucket.com/albums/nn18/ojijimanuel/arms_of_the_catholic_archdiocese_of_birmingham_by_petercrawford-d727h3u_zpscfv7es7q.png"/>
    <h4 id="textlogo">St Philip Neri</h4>
    <nav>
      <ul>
      <a href="#"><li>Home</li></a>
      <a href="#"><li>Contact</li></a>
      </ul>
    </nav>
  </header>


  <section id="section1">
    <h1 id="section1heading">Welcome to our multicultural society.</h1>
    <h4 id="section1paragraph">Come worship with us.</h4>
  </section>

  <section id="section2">
    <button type="button">View the Sunday Bulletin</button>
  </section>

  <section id="section3">
  </section>

  <section id="section4">
  </section>

  <footer>
  </footer>

</body>

body{
margin:0px;
}

header{
background-color:#080808;
display: flex;
align-items:center; /* align vertical */
padding-top:10px;
padding-bottom:10px;
position:fixed;
width:100%;
z-index:1000;
}

img{
display:inline-block;
width:35px;
margin-left:100px;
}


#textlogo{
margin:0px;
color:white;
font-family: 'Roboto', sans-serif;
font-weight:700;
display:inline-block;
margin:10px;
}

a{
color:white;
list-style-type:none;
text-decoration:none;
font-family:roboto,sans-serif;
font-weight:500;
font-size:15px;
}

nav{
margin-left:auto;
margin-right:100px;
}

nav li{
display:inline;
padding:5px;
}



#section1{
background-image:     url("http://i300.photobucket.com/albums/nn18/ojijimanuel/imageedit_4_6279316354_    zpsgbpfsvo1.jpg");
background-repeat:no-repeat;
background-size:100%;
background-position:center;
width:100%;
height:670px;
text-align:center;
display: flex;
align-items:center; /* align vertical */
justify-content:center;
flex-direction:column;

}

#section1heading{
color:white;
font-size:50px;
margin:0px;
font-family: 'Roboto', sans-serif;
font-weight:500;
display:block;
position:relative;
top:100px;

}

#section1paragraph{
color:white;
font-family:'Roboto', sans-serif;
font-weight:400;
font-size:20px;
position:relative;
top:100px;
}




#section2{
width:100%;
background-color:#cc1d00;
margin:0px;
padding-top:130px;
padding-bottom:130px;
text-align:center;
background-image:       url("http://i300.photobucket.com/albums/nn18/ojijimanuel/imageedit_7_2748546790_    zpsc1alysjl.jpg");
background-position:center;
background-size:100%;
display: flex;
align-items:center; /* align vertical */
justify-content:center;
height:50px;
}


button{
text-align:center;
border-color:white;
color:white;
background-color:transparent;
border-style:solid;
font-size:25px;
font-family: Roboto, sans-serif;
font-weight:500;
border-width:3.5px;
padding:10px;
}


button{
cursor: pointer; 
cursor: hand; 
}

#section3{
width:50%;
height:600px;
background-color:blue;
float:left;
}

#section4{
width:50%;
height:600px;
background-color:red;
float:right;
}

#footer{
width:100%;
background-color:orange;
margin:0px;
height:500px;
}

score 3 · Accepted Answer · edited Jun 20 '20 at 09:12

3

wrong CSS selector, use footer { instead of #footer {
add a clear fix to the footer style to avoid displaying it behind the sections

footer { clear: left; ...

edited Jun 20 '20 at 09:12

Community

1
1

answered Jan 01 '16 at 15:13

ViRuSTriNiTy

5,017
2
32
58

Thank you very much this works perfectly. also do you have an explanation of why the footer hides behind the sections? (just for general knowledge :) ) – OJM Jan 01 '16 at 15:24
@OJM [What is a clearfix?](http://stackoverflow.com/questions/8554043/what-is-clearfix) – ViRuSTriNiTy Jan 01 '16 at 15:27

Mario Kurzweil · Answer 2 · 2016-01-01T15:16:41.160

1

To see your footer set it to float: left; and also define a height.

CSS

footer{
  background: white;
  float: left;
  height: 200px;
}

I hope this will help you.

EDIT

And remove this #footer to footer. The first one is when you declared a id named footer.

edited Jan 01 '16 at 15:16

answered Jan 01 '16 at 15:12

Mario Kurzweil

490
6
11

This does not work, absolute positioning is the wrong approach here as it's a footer and a footer should align to previous elements. – ViRuSTriNiTy Jan 01 '16 at 15:16

score 0 · Answer 3 · answered Jan 01 '16 at 15:24

Firstly, Don't use an ID for the tag of the footer, instead of #footer, use footer. Secondly, the footer seems to appear behind the sections, use a clear:both; to fix that.

Have a look at the snippet below :)

body{
margin:0px;
}

header{
background-color:#080808;
display: flex;
align-items:center; /* align vertical */
padding-top:10px;
padding-bottom:10px;
position:fixed;
width:100%;
z-index:1000;
}

img{
display:inline-block;
width:35px;
margin-left:100px;
}


#textlogo{
margin:0px;
color:white;
font-family: 'Roboto', sans-serif;
font-weight:700;
display:inline-block;
margin:10px;
}

a{
color:white;
list-style-type:none;
text-decoration:none;
font-family:roboto,sans-serif;
font-weight:500;
font-size:15px;
}

nav{
margin-left:auto;
margin-right:100px;
}

nav li{
display:inline;
padding:5px;
}



#section1{
background-image:     url("http://i300.photobucket.com/albums/nn18/ojijimanuel/imageedit_4_6279316354_    zpsgbpfsvo1.jpg");
background-repeat:no-repeat;
background-size:100%;
background-position:center;
width:100%;
height:670px;
text-align:center;
display: flex;
align-items:center; /* align vertical */
justify-content:center;
flex-direction:column;

}

#section1heading{
color:white;
font-size:50px;
margin:0px;
font-family: 'Roboto', sans-serif;
font-weight:500;
display:block;
position:relative;
top:100px;

}

#section1paragraph{
color:white;
font-family:'Roboto', sans-serif;
font-weight:400;
font-size:20px;
position:relative;
top:100px;
}




#section2{
width:100%;
background-color:#cc1d00;
margin:0px;
padding-top:130px;
padding-bottom:130px;
text-align:center;
background-image:       url("http://i300.photobucket.com/albums/nn18/ojijimanuel/imageedit_7_2748546790_    zpsc1alysjl.jpg");
background-position:center;
background-size:100%;
display: flex;
align-items:center; /* align vertical */
justify-content:center;
height:50px;
}


button{
text-align:center;
border-color:white;
color:white;
background-color:transparent;
border-style:solid;
font-size:25px;
font-family: Roboto, sans-serif;
font-weight:500;
border-width:3.5px;
padding:10px;
}


button{
cursor: pointer; 
cursor: hand; 
}

#section3{
width:50%;
height:600px;
background-color:blue;
float:left;
}

#section4{
width:50%;
height:600px;
background-color:red;
float:right;
}

footer{
width:100%;
background-color:orange;
margin:0px;
height:500px;
clear: both;

}

<body> 

  <header>
    <img     src="http://i300.photobucket.com/albums/nn18/ojijimanuel/arms_of_the_catholic_archdiocese_of_birmingham_by_petercrawford-d727h3u_zpscfv7es7q.png"/>
    <h4 id="textlogo">St Philip Neri</h4>
    <nav>
      <ul>
      <a href="#"><li>Home</li></a>
      <a href="#"><li>Contact</li></a>
      </ul>
    </nav>
  </header>


  <section id="section1">
    <h1 id="section1heading">Welcome to our multicultural society.</h1>
    <h4 id="section1paragraph">Come worship with us.</h4>
  </section>

  <section id="section2">
    <button type="button">View the Sunday Bulletin</button>
  </section>

  <section id="section3">
  </section>

  <section id="section4">
  </section>

  <footer>
  </footer>

</body>

Issue with Footer styling

3 Answers3