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>
    <link  href="CSS/style.css" type="text/css">
    </head>
    <body>
    <div class="container">
    <header class="cf">
    <div class="Pull-Left">This Is The Main Title</div>
    <div class="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>
    
    <footer class="cf">
    <div  class="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%;
}

You may like these posts

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