Skip to content Skip to sidebar Skip to footer
Home / Css / Html

Why My Css Code Is Not Working For My Html Header And Footer?

Post a Comment
Need Some Help... Stucked At Very Peek Moment, I Have To Complete This Work By Tomorrow But My CSS Code Is Not Working For Header And Footer, Whereas The Same File Is Working For

Solution 1:

Your css is fine. The Problem is that your header and footer have 0 height.

Use clearfix Property. Reference URL: What is a clearfix?

body {
    font-family: Arial;
    font-size: 15px;
    line-height: 1.6em;
    background-color: linen;
    }
    
    .container {
    border: 2px solid black;
    width: 70%;
    margin: 20px auto;
    overflow: auto;
    }
    
    .Pull-Left {
    Float: Left;
    }
    
    .Pull-Right {
    Float: Right;
    }
    
    header {
    background-color: blue;
    }
    
    footer {
    background-color: blue;
    }
    
    .cf:after {
      content: "";
      display: table;
      clear: both;
    }
<!DOCTYPE html><html><head><title>ABCD</title><linkhref="CSS/style.css"type="text/css"></head><body><divclass="container"><headerclass="cf"><divclass="Pull-Left">This Is The Main Title</div><divclass="Pull-Right">***Some Text***</div></header></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br><footerclass="cf"><divclass="Pull-Left">This Is The Footer</div></footer></div><!--Container--></body></html>

Solution 2:

use clearfix class to the header and footer 

.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
} 
.clearfix { display: inline-block; } /* start commented backslash hack \*/
* html.clearfix { height: 1%; } 
.clearfix { display: block; } /* close commented backslash hack */

Solution 3:

use clear fix or give float to the header and footer like

header,footer{
  float:left;
  width:100%;
}

Post a Comment for "Why My Css Code Is Not Working For My Html Header And Footer?"