Sidebar Layout

Why does my sidebar have a gap between the header and where it starts?

Because your top nav is wrapping into two lines.

Can I get rid of it?

Start by editing layout.css and replacing padding:0 0 0.75em 0; with padding:0; in:

#globalnav {
float:left;
line-height:1em;
list-style:none;
margin:0;
padding:0 0 0.75em 0;
position:relative;
width:100%;
}

Then change margin:0; to margin:-37px 0 0;in:

.sidebar {
float:left;
font-size:0.8em;
margin:0;
padding:25px 0.5%;
width:22%;
}

Wow!… it’s so close, but now the top of the sidebar overlaps onto the bottom of the header on a wide screen monitor and still has a gap in a window screen size of 1024 x 768.

Reduce the negative top margin (-37px) to suit.

Will that work given that screen sizes vary?

Can I maybe hide that sidebar top under my header?

It will work just fine. Screens that have a height smaller than your page will simply have a vertical scroll bar like 99.9% of the sites out there.

With the sidebar margin:-50px 0 0;
on the 1024 x 768 size screen the sidebar looks good.
On the wide screen, it is too high and enters into the header’s space.

I restricted the navigation menu down to 80%, which keeps it then out of the sidebar’s space. Now to get that sidebar out of the header’s space on a wide screen.

Would the solution have anything to do with using a z-index in the sidebar layout?

I apologize for forgetting to mention that I finally resolved this issue. I thought using the word overlap in a topic title for a new post would be of more help, but it wasn’t.

Anyhow, here is a link to what the problem was.

Even though all that work finally fixed the last annoyance with that design I wanted to fix, I’m still trying out different themes and don’t know what one will remain on my site yet.