Forums

WordPress › Support » How-To and Troubleshooting

Wrapper encompasses only half the page (3 posts)

  1. tmillerwriter
    Member
    Posted 10 months ago #

    On a pages where the content is short, the footer sits below the content just fine, although not at a consistent height from page to page

    http://www.voltrek.com/about (looks fine)
    http://www.voltrek.com/implementation (ugh)

    And when I put the footer on any of these template pages, the footer ends up in the middle, and not anchored to the bottom.

    http://www.voltrek.com
    http://www.voltrek.com/technologies

    Looking at the CSS and the template files, it seems all the problems stems from #page, which seems to be defined as a wrapper, to wrap all the page text. But when I use Firebug, the highlight shows that the div id=page only goes half the page, and the footer is absolutely anchored right below that div -- but in the middle of the content!

    Can someone look and see if there is a fix to the #page to get it to extend to the true bottom of the content? And if so, how do I do that?

    Or do I need to create another wrapper? And if so, can you tell me -- just for any one of the templates and I can figure out the rest -- where I would put my wrapper code in the php file, and what it would like in the CSS to properly contain the page content so the footer will anchor to the bottom of the page properly?

    Thank you!

  2. alchymyth
    The Sweeper
    Posted 10 months ago #

    the footer is positioned absolute in ref to the browser window:

    #footer {
    position:absolute;
    top:610px;
    left:160px;
	padding: 30px..........

    reconsider the positioning - for instance, in the unmodified kubrick theme http://wordpress.org/extend/themes/default, the #footer div is within the #page div. maybe revert back to the way this theme is structured.

  3. tmillerwriter
    Member
    Posted 10 months ago #

    So, I read up on absolute and relative, and I think I understand, but changing the footer to relative in Firebug made it go off screen, so I'm wondering if you can explain more about the positioning of the footer.

    But, more importantly, I did do as you suggested and positioned the footer (get_footer) inside the page div, as seen on the code here pulled from this page:

    http://www.voltrek.com/overview/evs-cars

    <body class="page page-id-77 page-child parent-pageid-7 page-template page-template-voltrekcarspage-php logged-in admin-bar">
<div id="page">
<div id="suckerfishnav">
<div class="voltrek_masterpage">
<div id="footer" class="contentinfo">
</div>

    but the footer is still stuck in the middle of the page, and not sticking to the bottom. I'm wondering if the widget Simple Sidebar Nav put in the design has anything to do, because it seems the footer is getting caught above the Content Area 2.

    Can you give further assistance? Is there someplace else I might put get_footer code, and other CSS changes to make this work, especially as the footer is not sitting uniformly even when it is at the bottom of the container as seen on these two pages:

    http://www.voltrek.com/implementation
    http://www.voltrek.com/about

Reply

You must log in to post.

About this Topic

Tags