4

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 Other Things Like Font-Family, Font-Size, Body Background Color...

    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;
    }
    <!DOCTYPE html>
    <html>
    <head>
    <title>ABCD</title>
    <link rel="stylesheet" href="CSS/style.css" type="text/css">
    </head>
    <body>
    <div class="container">
    <header>
 <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>
 <div  class="Pull-Left">This Is The Footer</div>
    </footer>
 
    </div><!--Container-->
 
    </body>
    </html>
Venkat.R
  • 7,420
  • 5
  • 42
  • 63
Ammy Dua
  • 63
  • 1
  • 1
  • 10
  • 2
    What about the header and footer is _not working_? – R Day Dec 17 '15 at 09:15
  • 1
    `Float: Left;` `Float: Right;`. I think css is case-sensitive. change em to lowercase and see. – musafar006 Dec 17 '15 at 09:17
  • @dreamster css is only case sensitive for names of classes and ids, not the properties – Pete Dec 17 '15 at 09:20
  • 1
    Possible duplicate of [How can I use "float: left" in a div without breaking the containing element's height?](http://stackoverflow.com/questions/563844/how-can-i-use-float-left-in-a-div-without-breaking-the-containing-elements-h) – Pete Dec 17 '15 at 09:24

3 Answers3

6

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 rel="stylesheet" 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>
Community
  • 1
  • 1
Aytee
  • 567
  • 1
  • 4
  • 20
1

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 */
Pete
  • 57,112
  • 28
  • 117
  • 166
Mohamed Rihan
  • 131
  • 2
  • 15
1

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

header,footer{
  float:left;
  width:100%;
}
Pete
  • 57,112
  • 28
  • 117
  • 166
Abraham Sankutty
  • 105
  • 8