CSS - Margin trouble?

Discussion in 'Web Design and Development' started by londonweb, Oct 19, 2006.

  1. londonweb macrumors 6502

    londonweb

    Joined:
    Sep 14, 2005
    Location:
    london
    #1
    Hi guys, can someone suggest where I'm going wrong with this css?

    Code:
    #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.
     
  2. julan macrumors newbie

    julan

    Joined:
    Oct 11, 2006
    Location:
    Australia
    #2
    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]
     
  3. londonweb thread starter macrumors 6502

    londonweb

    Joined:
    Sep 14, 2005
    Location:
    london
    #3
    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?

    Code:
    #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.
     
  4. ThunderLounge macrumors 6502

    ThunderLounge

    Joined:
    Sep 20, 2006
    #4
    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.
     
  5. pengu macrumors 6502a

    Joined:
    Mar 20, 2005
    Location:
    Diddily Daddily...
    #5
    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?
     
  6. clintob macrumors 6502

    clintob

    Joined:
    Feb 16, 2006
    Location:
    New York, NY
    #6
    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. :cool:
     
  7. londonweb thread starter macrumors 6502

    londonweb

    Joined:
    Sep 14, 2005
    Location:
    london
    #7
    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).
     
  8. clintob macrumors 6502

    clintob

    Joined:
    Feb 16, 2006
    Location:
    New York, NY
    #8
    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/
     
  9. londonweb thread starter macrumors 6502

    londonweb

    Joined:
    Sep 14, 2005
    Location:
    london
    #9
    thanks Clintob, those sites are excellent, I'll be having good read through it all.
     

Share This Page