I want the width of my footer to stretch 100% of the page. However, I have defined min-width:1000px, and max-width:1000px on the body of the HTML document to help create a fluid layout. Now when I create the footer setting it to max/min-width:100% it does not span across the whole page, and is restricted by the min/max-width set on the body. Is there a way set the width of the footer to be 100% whilst having the min/max-width defined at 1000px in body? The code for the HTML and CSS is:HTML:\[code\]<!doctype html><html lang="en"><head>Some Text</head><body><header>Some Text</header><section class="mainSection"> <article class="mainArticle"> <header> <h4>Some Text</h4> </header> <p> Some text </p> </article></section><footer> <section class="footerSection"> <article class="footerArticle"> <p>Some Text</p> </article> </section></footer>\[/code\]CSS:\[code\]body{ margin:0px auto; min-width:1000px; max-width:1000px; height:auto; background-color: #97cdcd; background-size: 5px 5px; background-image: linear-gradient(rgba(189, 204, 211, .50) 50%, transparent 50%, transparent); background-image: -webkit-linear-gradient(rgba(189, 204, 211, .50) 50%, transparent 50%, transparent); background-image: -moz-linear-gradient(rgba(189, 204, 211, .50) 50%, transparent 50%, transparent);}body > footer{ margin:0px; padding:0px; min-width:100%; max-width:100%; background:#ffffff; height:auto;}\[/code\]
Footer does not stretch to 100% width
- Thread starter kmmhuy
- Start date