html - Trying to make a footer background (not an image) overflow a div to width of browser, but have no scrollbars -


so on site: http://istec.org trying have aqua-colored background behind footer fits width of browser, has no scrollbars. current solution have used is:

.custom #footer-bg { /* wrapper footer */   position: relative;   background: rgb(0, 111, 111);  } .custom #footer-bg:before, .custom #footer-bg:after {   content: "";   position: absolute;   background: rgb(0, 111, 111);  /* matches background of footer's background */   top: 0;   bottom: 0;   width: 1000px; }  .custom #footer-bg:before {   right: 100%;  } .custom #footer-bg:after {   left: 100%; } 

...but adds horizontal scrollbars. there way rid of scrollbars, make sure still appear if browser size gets smaller content?

i consider putting footer element below div#page, setting width 100% , giving background color, , nesting div#footer inside same width div#page. set margin: auto ondiv#footer` centered inside footer.

here's markup:

<footer>     <div id="footer">         <!-- footer here -->     </div> </footer> 

and css:

footer {      width: 100%;      background: rgb(0, 111, 111); }  #footer {      width: 102.9em;      margin: auto; } 

update: these changes, still have tiny bit of horizontal scrolling, not related footer. can remove footer, , scrollbar still there meaning 1 of elements wider page.


Comments

Popular posts from this blog

php - Calling a template part from a post -

Firefox SVG shape not printing when it has stroke -

How to mention the localhost in android -