CODEWITHSUNDEEP
htmlcss
theailona
theailona

Reputation: 63

How to eliminate extra space on the bottom of the page (WP theme)

I am working on a Wordpress theme for a friend, and for some reason I couldn't pin-point, there's an extra space on the bottom of the page. My container divs have 100% height, I added red & blue borders just so the boundaries are visible.

My structure is as follows:

dark grey is the mother container in which there are two child containers (medium grey), inside the right child container, there's another container (light grey)

Anyone with a fresh pair of eyes could help me fix this?

the website http://vedroelcitra.com/blog/

the CSS http://vedroelcitra.com/blog/wp-content/themes/nyan/style.css

Upvotes: 1

Views: 407

Answers (3)

Akhil
Akhil

Reputation: 1

Try removing height:100% from #sidebar ...

Upvotes: 0

bozdoz
bozdoz

Reputation: 12890

StackOverflow discourages links. It's better to put the code in the question (because inevitably, the content in the link will change).

Your problem is with your #sidebar element (the left container). You need to change the padding to 0 2% for example, to remove the padding that is in addition to the 100% height, as you say. So, to clarify, change your #sidebar padding from 2% to 0 2%.

0 2% means 0 on the top and bottom, and 2% on the sides.

Upvotes: 0

PSL
PSL

Reputation: 123739

Remove padding top and bottom from #sidebar. that is putting extra space beneath the sidebar.

Try this:-

#sidebar {
border: 1px solid green;
position: absolute;
top: 0;
left: 0;
width: 19%;
height: 100%;
padding: 0 2% 0 2%;
height: 100%;
}

Upvotes: 2

Related Questions