Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 247
  • 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

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

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