All geek questions in one place

Why is my Css code not working for my HTML header and footer?

Need help...

Stuck very fast, I have to finish this job tomorrow, but my CSS code doesn’t work for the header and footer, while the same file works 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>
Run code
+4
source share
3 answers

Your css is ok. The problem is that your header and footer have 0 heights.

Use property clearfix. Link URL: What is 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>
Run code
+6
source

use clearfix class for 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 */
+1
source

use clear fix or give float for header and footer e.g.

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

Source: https://habr.com/ru/post/1620511/

More articles:


All Articles