What is causing all of this extra white space in webpage design?

Question

I am building an html email and I am finished with what I wanted to do but I have a large white space underneath my design and I can't get rid of it.

Please tell me what is causing that space and how to get rid of it.

My goal here is to get rid of the white space, not to redesign the page to make it more compliant, try different css tricks or get the page to work better on firefox or google mail etc. I am only interested in the white space fix.

http://www.geolearning.com/email/saastest03.htm

This is for email - most experts say to avoid CSS - so no CSS!

http://www.anandgraves.com/html-email-guide

Answer 1

your problem lies within your css style sheet.

Answer 2

Try writing your HTML so the lines spread out more across the page, and at the end, be sure there is a 'cut off' that is at the 'bottom' of the page on the screen. Your 'problem' is because your page is too long, and too thin, and you MAY be able to 'shorten' the scroll bar to the right so it doesn't have the 'white' at the bottom ... but you also have a lot of 'white' at the sides, and unless you are not done and are going to 'add things' to fill that space, I think the webpage looks okay ... although it does need some brightly colored pictures or something to 'relieve the eye' from all of that text.

Answer 3

Your VERY best bet is not to use tables for layout! (I notice also that a part of your top is poking out awkwardly to the right and up...). You HAVE noticed, too, that one of your layout TDs has a height measurement? That could be getting in your way!

I humbly suggest, wrap the whole page in a large div, determine the page's width by setting the width of that larger div. Then define a left div, floating left, within that, and set its width and other characteristics. Then define a right div, floating right and like that.

Use CSS all in the in a