Solved

Unwanted white space

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
IFRAME in a ASPX file no longer working 3 24
simplest php form 3 57
Form not operating correctly. 1 22
Error on link 14 36
So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

932 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

7 Experts available now in Live!

Get 1:1 Help Now