Need help? Check out our Support site, then


White Space/Header Issues (link of site and css included)

  1. I have spent hours crawling multiple forums for how to fix this issue, so I apologize if this is posted elsewhere (or if I'm posting this in the wrong section.)

    I have recently installed the Imbalance 2 template for my WordPress blog. I have been able to successfully make some minor css alterations to customize how my page looks. However, I'm still having an issue with the space between the bottom of my header and where the content begins.

    By the way, you may find my site here: jbakerpr88.wordpress.com

    This is what my CSS alterations look like so far:

    #header-left {
    height: 90px;
    padding-bottom: 0;
    }

    #content {
    height: 500px;
    }

    #footer {
    width: 900px;
    height: 400px;
    position: relative;
    }

    #footer-left {
    float: left;
    padding-right: 10px;
    padding-left: 10px;
    width: 430px;
    }

    #footer-right {
    float: right;
    padding-left: 10px;
    padding-right: 10px;
    width: 430px;
    }

    .widget {
    line-height: 24px;
    margin: 0 0 20px;
    width: 210px;
    float: right;
    }

    #site-info {
    position: absolute;
    bottom: 10px;
    width: 97%;
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid #d6d6d6;
    }

    I have tried everything I know to do with the header margins, padding, and borders that I know to do. I have also done everything I know to do with the content margins, height, padding, and borders and still nothing. I can at least get the gray line to move from one extreme side to the other (i.e.,

      just
    under the header text OR
      just
    above the content.) I just want to get rid of the white space in between.

    I love this template and truly don't want to have to pick another one. Please help. Thank you in advance.

    The blog I need help with is jbakerpr88.wordpress.com.

  2. For the future, please post CSS questions in the CSS Customization forum where hopefully you will get assistance from staff or a knowledgeable forum volunteer. I'll ask to have this moved there.

  3. The space above the grey line is there because the header has some bottom padding, and its leftmost column has a fixed minimum height (to make room for the header image). Remove this:

    #header-left {
        height: 90px;
        padding-bottom: 0;
    }

    And add this:

    #header {
        padding-bottom: 0;
    }
    #branding {
        min-height: 170px;
    }

    Decrease the 170 to adjust.

  4. That worked! Thanks so much!

Topic Closed

This topic has been closed to new replies.

About this Topic