Removing or Hiding Blank Space Left by Relative Positioning

StackOverflow https://stackoverflow.com/questions/20390616

Question

I'm updating an older html page with CSS, which I've just started getting into. The new version looks good, but there are huge empty spaces now at the bottom and right of the page when the user scrolls.

The nature of the page is several different content boxes, all of which have graphical backgrounds.

The old method I was using was to use a large table to organize the layout and give the table one large, solid background image. A colleague pointed out this was too old-school and suggested I try learning divs and css.

The newer version I produced broke each box up into separate divs and images and positioned them absolutely, but there was no way to keep the content centered if the browser window was resized.

I redid the whole page again, this time using relative positioning and one main container div that I could center. Everything looks good and stays centered, but now I'm getting big blank spaces on the bottom and right sides because of the positioning.

I've seen some people say they've fixed this by using a negative margin, but it doesn't seem to be having any effect on my page (unless I'm putting it in the wrong spot).

I need to know if there's a specific way to fix this that I don't know about or if I'm just going about the whole page completely the wrong way. How can I get my elements lined up correctly, centered, and with no extra scroll space? Should I just go back to using a table?

Here's a simplified version of the page with the content taken out (just the layout):

<!DOCTYPE html>
<html>

<meta charset="utf-8">

<style type="text/css">
  body
    {
    background-color: black;
    margin-bottom: -2000px;
    }

  div.main
    {
    width: 1100px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: -2000px;
    }

  div.logo
    {
    position: relative;
    left: 40px;
    top: 60px;
    z-index: 1;
    }

  div.window1
    {
    position: relative;
    left: 320px;
    top: -555px;
    z-index: 1;
    }

  div.window2
    {
    position: relative;
    left: 320px;
    top: -580px;
    z-index: 1;
    }

  div.window3
    {
    position: relative;
    left: 680px;
    top: -1250px;
    z-index: 2;
    }

  div.window4
    {
    position: relative;
    left: 25px;
    top: -1570px;
    z-index: 1;
    }

</style>

<div class="main">
  <div class="logo">
    <img src="images/logo8.png">
  </div>

  <div class="window1">
    <img src="images/window1_fullsize.png">
  </div>

  <div class="window2">
    <img src="images/window2_fullsize.png">
  </div>

  <div class="window3">
    <img src="images/window3_fullsize.png">
  </div>

  <div class="window4">
    <img src="images/window4_fullsize.png">
  </div>
</div>

</html>
Was it helpful?

Solution 2

I fixed this some time ago. I eventually did go back to using a table for the layout (which I understand is frowned upon) combined with a little bit of relative positioning, but I made sure everything was done with css and was w3 compliant:

http://www.burningfreak.com

The inherent problem, I think, is the way I designed my older pages, visually. They were highly graphical and usually made up of one contiguous background image, with a lot of art making up the section borders, etc. The general layouts tended to be unusual shapes, and I would then over-lay text and content on top on that. Unfortunately, it's very difficult to get looking right if the sections are separated.

I've since designed newer pages using only divs and css and it seems to work well, although it's a bit trickier to get working. The key, I think, is to come up with a look and style that I know is going to work using that technique from the start.

OTHER TIPS

You could use "em" or "%" values for top and left.

But the best be to handle this using JS.

Hope this helps.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top