CODEWITHSUNDEEP
htmlcsswordpress
Sceneman
Sceneman

Reputation: 97

Big empty space at bottom of webpage? Can't seem to isolate the guilty CSS

I've been setting up a very basic Wordpress site. All of the pages have a lot of empty space at the bottom. Pages with more placeholder content have more space at the bottom than the others.

I have been reading other threads from people with similar problems, and I can't fix the problem on my site using suggested fixes (the margin property in a certain div was often the culprit).

Check it out: http://www.hairofthedogproductions.co.nz/?page_id=5

My client wanted a totally minimal bare-bones site so I have collapsed post/page metadata, comments, and the sidebar. I just can't for the life of me get rid of the big empty space at the bottom.

Upvotes: 1

Views: 4792

Answers (3)

elclanrs
elclanrs

Reputation: 94101

Your main problem is in the comments template. I see you're using visibility: collapse to hide elements, but collapse is just for table elements, and if used in other tags it'll default to hidden. Plus, keep in mind that visibility: hidden hides elements but keeps them in flow. You might want to use display: none instead.
This will solve your problem, try it out.

#comments { display: none; }

Upvotes: 2

Dips
Dips

Reputation: 3280

Just apply overflow:hidden on your main wrapper then it will remove all blank space at the bottom

#main {
overflow: hidden;
}

Upvotes: 0

Tim M.
Tim M.

Reputation: 54359

Validate your page: http://validator.w3.org

I validated it and found about a dozen errors (some of them potentially serious enough to break the layout of the page, such as an unterminated tag).

When inspecting the source in Chrome, the element in the blank area was the HTML tag itself, which might indicate an overall failure to determine the correct document structure--the parser tries but can't always determine what you want it to do when there are malformed tags.

Upvotes: 1

Related Questions