Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 266
  • Last Modified:

Unwanted white space

Hi, I am new to DIV and CSS. We are working on a new system and it is coming along well but there is un-wanted whitespace at the end. I don't want the user to see the scroll bar but future pages will be able to scroll. Would be best if the whitespace was removed but not sure how.

Example site:
http://www.liveaboardfleet.com/online_v2/
0
Robert Saylor
Asked:
Robert Saylor
1 Solution
 
chilternPCCommented:
you also need to set the <body> and the <html> heights.

as Body looks to its parent (HTML) for how to scale , so HTML needs to be set too.

try:

html{
  min-height: 100%;
}
body {
  min-height: 100%;
}
0
 
Kim WalkerWeb Programmer/TechnicianCommented:
You've used a lot of relative positioning in your CSS. CSS positioning can be very tricky. w3schools.com says this about relative positioning:
The content of relatively positioned elements can be moved and overlap other elements, but the reserved space for the element is still preserved in the normal flow.
This means that even though the relatively positioned content is moved from the position it would normally be in, that space is still allocated to that element. You'd be better served to use absolute positioning which removes the content from the normal flow of the page.

You should know that positioning is based on the closest ancestor element with a position attribute. In your case that doesn't matter much since the positioned elements are children of a form which is a child of the body. So their absolute position would be based on the window position.

But if you wrapped all your positioned elements in a div, you could absolutely position that div and it would move all it's children with it. For that matter, you could position the form element which is their parent. This way you wouldn't have to relatively position each individual element.
0
 
Robert SaylorSenior DeveloperAuthor Commented:
Still messing with it but I created 1 relative then created an absolute wrapper then added floats inside the absolute. I am starting to understand CSS positioning now. I am a table guy but moving away from tables.

The large whitespace at the end is gone and we are going to add a small footer so should look good. Thanks!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now