Solved

Unwanted white space

Posted on 2013-10-23
3
183 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 28

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 21

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 6

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

What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

Join & Write a Comment

This article discusses how to create an extensible mechanism for linked drop downs.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…

708 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

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now