Support » Themes and Templates » Footer Touching Header

  • Resolved jmdesantis


    I’m currently transferring my Html site into WordPress, however, I wanted to keep the same exact layout which required me to build my own Template. Now, while I have experience in Html and Dreamweaver, I have none in PHP and WordPress, so I looked up some How-Tos. For the most part they worked, but I’m still having a few problems. The easiest way to explain is to show you:

    Current Site:
    Sample Page on New WP Version:

    As you can see, most blatant is that the footer is butt up against the header (not to mention the sidebar is extending past the Wrapper). What’s more, I’d like to somehow get rid of that extra space at the top and between the header and menu (it’s too much space).

    Please, I’ve been trying to build this for two months now, and now I’m so close. I’ve been at diagnosing this problem for hours (moving code around, changing margins, etc, etc), and I can’t seem to find a fix. If anyone knows how to fix this, I’d be extremely grateful.

Viewing 8 replies - 1 through 8 (of 8 total)
  • I don’t see all of those problems in Firefox – but at least part of the footer problem can be fixed by adding “clear: both;” to the CSS code here:

    #footer {
        background-image: url("/images/siteart/sidebar_bg.png");
        clear: both;
        font-size: x-small;
        padding: 0 10px 0 20px;

    That creates a different problem of the background color 🙁 – so you may need to look at other ways of setting the background color and/or borders on the page.

    You also have some HTML mark-up errors – so I’d suggest fixing those too – as they may cause layout or other problems:

    BTW, nice job so far – you’ve obviously done a lot of work :)!

    Thanks for the response and checking out those errors. Unfortunately, some of what seems to read well in Dreamweaver doesn’t translate into WordPress. I’m going to go through the errors and correct them today. So thanks for running that for me, otherwise I wouldn’t have known.

    As for the clear: both; code, it seems to have worked fine, without the need of creating a new way of adding in the background colour. Is that showing on yours too?

    NOTE: I’m running on Firefox as well and I’m still seeing the extra space between the top of the page and the top of the wrapper.

    Maybe Mac vs. PC (I’m on Mac version)? It may also be related to one of the easy-to-fix errors — a few of your HTML comments just have an extra hyphen in them:

    <!--Code for the top banner--->
      <div id="header">

    So see if that doesn’t correct that.

    That doesn’t seem to be correcting it, though logging out did.

    Some of the error issues I’m having trouble finding, but a new problem became apparent. Though the code is the same for single.php as it is for page.php and index.php, for some reason when I look at an individual post, it’s not showing the images in the sidebar or header:

    I see why. The code is

    <img src=”../images/siteart/logo_banner.png” width=”780″ height=”180″/>

    for calling the header image, however, it’s calling it from:

    /2012/11/images/siteart/logo_banner.png (as apparent from the links in the top menu as well)

    How do I fix the code so that it’s going back to the main folder to then go to the images folder?

    since your images directory is right inside your root directory, I would suggest using the following for calling images:

    <img src="<?php echo site_url(); ?>/images/siteart/logo_banner.png" width="780" height="180" >

    The result of which will always point to:

    Oh. Thank you so much. That worked. Though I think I’ll just stick to the html version, if that’s all right.

    Both you have been an immense help with this.

    Thank you!
    Thank you!
    Thank you!

    If I seem melodramatic it’s just that I’ve been going mad trying to debug all of these issues. Minus a few corrections and additions, I should be good to go. Looking forward to officially launching the blog (the real thing, not the faux-html thing I’ve been using) next Wednesday, if possible.

    Thanks again. All the best.

    LOL – totally understand, and good luck with the launch!

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Footer Touching Header’ is closed to new replies.