Without delving deeply into the HTML, it looks like you’ve one (or more) too many closing divs (</div>). Not sure if that’s any help – but it’s something to look at to begin with.
Thanks for your response Gary!
I am combing through the files (page.php and footer.php) and am not finding the extra </div>
Did you happen to see an indication of where the extra </div> might be?
Sorry for the bother and I appreciate the attention you’ve already given this.
I recommend using your browser’s development tools to run through the HTML, that’s the Firebug plug-in in Firefox, or [ctrl]+[shift]+[i] in chrome. Step through the HTML in the panel and it highlights on the page giving you an idea of where the problem might be.
Your page <footer>:
<footer id="colophon" role="contentinfo">
(not to be mixed up with the post footer)is sitting outside the #page div, checking a standard twenty twelve post page, the page footer HTML is inside it.
It looks very much like you may have accidentally inserted some code in the wrong place…
Thanks again Gary – I regularly employ both Chrome’s development tools and Firebug. I actually placed the footer outside of the page div on purpose as I wanted the footer to stretch the width of the wrapper rather than being buried within the page div.
Is there a better way to go about this? And why would it show up correctly on the front-page.php?
Thanks again for your attention to this problem!
I did a bit of poking around, the problem seems to be with the #colophon css or the css of one of the preceding divs. Adding display: inline-block; Moved it to the right place, but it’s left justified – needs centering with `margin-left:auto; margin-right:auto;’ you may need to add width and also rules for dealing with responsive changes as the view-port size changes.
Hope that helps.
Taking a moment to think on this, the problem can probably be solved by a properly placed clearing div <div style="clear:both;"></div> or adding
`clear:both;’ to #colophon
You have a full width content immediately above the footer on the front page which is why you are not seeing the problem there.
I’ll be interested to hear what fixes it.
Gary – you are a hero! thank you so much! This is what ended up working:
#colophon {
background: #666666;
padding: 3.75ex;
box-shadow: 5px 5px 5px 5px #666;
max-width: 1010px;
padding-top: 30px;
position: relative;
padding-bottom: 1em;
margin: 0 auto;
clear: both;
}
Out of curiosity what did the ‘clear: both;’ actually do (what made it work)?
And yes this site is a non-fluid responsive disaster right now, the footer is just one example of it. Much work to do!
But thank you again for your help on this!!
The css clear property specifies on which sides of an element where other floating elements are not allowed.
In your case clear:left; would probably work equally well, as the floating element is to the left, but it is safer to clear both sides in case one page has a long, right floated sidebar.
