Solved

Unwanted white space

Posted on 2013-10-23
3
191 Views
Last Modified: 2013-10-24
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
Comment
Question by:Robert Saylor
3 Comments
 
LVL 29

Expert Comment

by:chilternPC
ID: 39595503
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
 
LVL 22

Accepted Solution

by:
Kim Walker earned 500 total points
ID: 39597027
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
 
LVL 7

Author Closing Comment

by:Robert Saylor
ID: 39597423
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

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
CSS Header Navigation Not Responsive 4 42
White space in figure / img 4 20
Html split(text) Part2 6 23
center navbar (navigation menu) on web page 3 22
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
Find out what you should include to make the best professional email signature for your organization.
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

733 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question