7777 66

Using relative positioning, I've ended up having a fair bit of space stuck under the content on this page:

For the CSS

#content-container {                                    
width:815px;
padding:15px;
border-right:#cc8b2d 10px solid;
border-top:#cc8b2d 10px solid;
font-size:14px;
background-color:#ACBDC5;
}

#scrollycue
{
position:relative;
z-index:1;
top:-25px;
}

#scriptwork {
position:relative;
z-index:2;
top:-667px;
left:272px;
}

#posts{
position:relative;
z-index:3;
top:-840px;
width:550px;
}

For the HTML:

<div id="content-container">    

<img id="scrollycue" src="sample-graph.png" /> 

<a href="<?php $bloginfo = get_bloginfo('url'); ?>"><img id="scriptwork" src="sample-logo.png" /></a> 

<div id="posts">

<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<h2><?php the_title(); ?><a style="visibility:hidden;">.</a></h2> 
<?php the_content(); ?>
<?php endwhile; ?>
<?php endif; ?>

</div>

</div>

I've tried various forms of absolute positioning and placing the images outside the content-container div as well. Usually what happens is that they'll stick in place, but then I'm unable to get the div to stretch vertically all the way down to the bottom. And if the content's shorter than the large cloud image, then the image will also stick past the footer.

Basically, it's positioned just about the way I want it right now except that it's always being thrown off by one thing. Any advice?

Thanks.

3 answers

0
points
This was chosen as the best answer

Another solution - just for reference: use negative margins as a substitute for relative positioning. I.E.

margin-top:-100px;

is the similar to:

position: relative; bottom:100px;

But using the negative margin doesn't create the extra space.

Answered about 7 years ago by Chris Browning
  • Marking this as best answer because margins are probably the way to go; the only reason I was using padding for vertical spacing was because I was using cssstickyfooter.com code. 7777 about 7 years ago
0
points

when you use negative relative positioning the box is still down there, you just pull the content up, so the box takes space down in the bottom of the document.

try putting borders on everything and see what's forcing the elements down the page...

Answered about 7 years ago by Tony Crockford
7777 66
0
points

Got it! Here's my hack for the 100% vertical height thing:

I took all the images out and positioned them absolutely:

    img#scrollycue
    {
    position:absolute;
    z-index:1;
    top:47px;
    }

    img#scriptwork {
    position:absolute;
    z-index:2;
    top:195px;
    left:275px;
    }

I used padding to push down the posts:

    #posts{
    position:relative;
    z-index:3;
    width:500px;
    padding-top:275px;
    }

The main content container is this. I added the minimum height I was willing to have the page (basically just a little longer than the largest image on the page):

    #content-container {                                    
    width:815px;
    padding:15px;
    border-right:#cc8b2d 10px solid;
    border-top:#cc8b2d 10px solid;
    background-color:#ACBDC5;
    min-height:800px;
    }

And I added something new after the above HTML outside of the main content div:

<div style="width:815px;padding:15px;border-right:#cc8b2d 10px solid;background-color:#ACBDC5;min-height:500px;position:absolute;z-index:-1;bottom:46px;"></div>

So basically the new div is a spacer set to the same width, padding, right border, and background color as the main div. It's set to a 500 px height (that should be more than enough, right?) and absolutely positioned at a z-index behind everything else on the page with the bottom set to the height of the footer. So if the minimum height of the main content div still isn't enough to close the gap to the footer, it should close like a curtain over any remaining space.

Answered about 7 years ago by 7777