CODEWITHSUNDEEP
htmlcss
codefreak
codefreak

Reputation: 309

Unable to spread the header and footer to the entire browser length

This CSS code leaves the left bit of the browser uncovered in the header and footer...

  header {
    float:left;
    height: 65px;
    background: #303030;
    font-family:'Comic Sans MS';
    color:white;
    position:fixed;
    top:0;
    min-width:100%;
  }
  footer {
    height: 65px;
    background: #303030;
    position:fixed;
    bottom:0;
    min-width:100%;
  }

what is the problem in the code so that i can spread it entirely covering the width of the browser...?

Upvotes: 0

Views: 50

Answers (4)

user3212461
user3212461

Reputation: 433

specify the left property for header and footer

  header {
    height: 65px;
    background: #303030;
    font-family:'Comic Sans MS';
    color:white;
    position:fixed;
    min-width:100%;
    left: 0; /*this one*/
    top: 0;
  }
  footer {
    height: 65px;
    background: #303030;
    position:fixed;
    min-width:100%;
    left: 0; /*this one*/
    bottom: 0;
  }

please see the example below

codepen

Upvotes: 1

codefreak
codefreak

Reputation: 309

The correct solution to the problem is 

header {
    height: 65px;
    background: #303030;
    font-family:'Comic Sans MS';
    color:white;
    position:fixed;
    top:0;
    left:0;
    width:100%;
  }
  footer {
    height: 65px;
    background: #303030;
    position:fixed;
    bottom:0;
    left:0;
    min-width:100%;
  }

Upvotes: 0

jtorrescr
jtorrescr

Reputation: 627

You have not reseted some browser default settings, add this you your css:

html, body{
    padding:0px;
    margin:0px;
}

I recommend you to use a css reset such as this: http://meyerweb.com/eric/tools/css/reset/

Upvotes: 0

DTSCode
DTSCode

Reputation: 1090

Its been a while since I've done web-design, however I don't think float left with position fixed will stretch it. if anything it will make it dynamic. at any rate, a quick google search unearthed this: stackoverflow.com/questions/2309819/how-to-stretch-a-header-across-a-web-page-background-with-css

Upvotes: 0

Related Questions