CSS - Margin trouble?

[londonweb]

Hi guys, can someone suggest where I'm going wrong with this css?

#stretchMaking {
	position:absolute;
	margin-top:470px;
	margin-bottom:32px;
	left:0px;
	background-image:url(../gfx/stretch_making.jpg);
	background-repeat:repeat-y;
	z-index:1;
}

I'm trying to create an area in the centre of the page that will stretch vertically with the browser window to hold its content. The problem is that I just get a blank area between the top part and the footer which is aligned with the bottom of the page. I was under the impression that margins where the way to go, so why isn't it working?

Edit: You can see the page here.

 

[julan]

Hi guys, can someone suggest where I'm going wrong with this css?

#stretchMaking {
	position:absolute;
	margin-top:470px;
	margin-bottom:32px;
	left:0px;
	background-image:url(../gfx/stretch_making.jpg);
	background-repeat:repeat-y;
	z-index:1;
}

I'm trying to create an area in the centre of the page that will stretch vertically with the browser window to hold its content. The problem is that I just get a blank area between the top part and the footer which is aligned with the bottom of the page. I was under the impression that margins where the way to go, so why isn't it working?

Edit: You can see the page here.

Hey Londonweb,

I would look at adding a height and a width to the css seeing as the div is empty.

[edit] woops, sorry that will make it display, but it wont stretch [/edit]

 

[londonweb]

Thanks, I have tried that but of course I need to make the height 100% , and then I get a huge vertical scroll bar and the footer keeps floating up the screen...any further ideas?

#stretchMaking {
	position:absolute;
	left:0px;
	height:100%;
	width:100%;
	margin-top:470px;
	margin-bottom:32px;
	background-image:url(../gfx/stretch_making.jpg);
	background-repeat:repeat-y;
	z-index:1;
}

See the effect here.

 

[ThunderLounge]

You could also add a big padding to the bottom, like 5000px and then
cancel it out with a negative bottom margin like -5000px. If you want padding,
then add that to the bottom padding, but leave the margin the same. You'll
also need to hide the overflow for this div, and make a couple tweaks for IE.
One specific one I recall is hiding the overflow of the body for IE.

 

[pengu]

for that, i suggest you set a repeating backgroun for the page itself, and then the footer and header will apear over it, giving the result you want, without unnecessary scrolling (as now, due to large padding i assume?

 

[clintob]

The one glaring flaw in CSS layout and design is vertical scaling/positioning/centering.

CSS, up to now, has a very severe weakness in that regard. CSS div tags can be given strict height values, but they don't behave in the same way as tables. It's a huge P in the A to get a CSS layout to function in a "100%" vertical manner. As has been mentioned here, if that's a necessity for you, you'll have more luck finding a creative way to work with background colors and images to acheive the desired effect.

This has all been well document by those of us who, through the years of table based design, got used to positioning a footer at the bottom of our page and can no longer do so with CSS. You can position a footer at the bottom of your content, but if your content doesn't fill the screen vertically, there is no way (without nasty, ugly hacks) to get your footer to rest at the bottom of the page anyway.

Welcome to the quirky world of CSS design.

 

[londonweb]

The one glaring flaw in CSS layout and design is vertical scaling/positioning/centering.

Hmmmm, that's sort of encouraging, at least I can stop fiddling aimlessly with it. I think I'll have to do as Pengu suggested, and use a background repeat, underneath the other images that make up the page. If you check the link now, you'll see that I've managed to get it to work by using fixed positioning and placing a 100% height div underneath positioned at the top left. This works fine in Safari and FF on mac, but IE doesn't like it (surprise surprise).

 

[clintob]

Hmmmm, that's sort of encouraging, at least I can stop fiddling aimlessly with it. I think I'll have to do as Pengu suggested, and use a background repeat, underneath the other images that make up the page. If you check the link now, you'll see that I've managed to get it to work by using fixed positioning and placing a 100% height div underneath positioned at the top left. This works fine in Safari and FF on mac, but IE doesn't like it (surprise surprise).

Yeah... the fixed positioning thing is one option, although of course there's the rather large problem of your footer becoming hidden behind any content that reaches the bottom of the page and overlaps the fixed div.

You can get it work in IE with some finagling... Google fixed position footers and you'll come up with some hacks. Unfortunately, IE is a poor pitiful soul. You need to chew its food for it, and then rub it's little pot belly to keep it from throwing up all over itself. Sad.

Anyway, check out these two links regarding CSS layout. Awesome stuff, and gives some really great, understandable insight from people who know their stuff:

http://www.alistapart.com/articles/footers/
http://www.alistapart.com/articles/holygrail/

 

[londonweb]

thanks Clintob, those sites are excellent, I'll be having good read through it all.