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

noname12345678 · Member · Jul 13, 2013 at 4:36 am
Copy link

Add topic to favorites
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.,
under the header text OR
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: (visible only to logged in users)
justjennifer · Member · Jul 13, 2013 at 5:49 am
Copy link
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.
justpi · Member · Jul 13, 2013 at 8:48 am
Copy link
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.
noname12345678 · Member · Jul 14, 2013 at 8:03 pm
Copy link
That worked! Thanks so much!

No items found.