lupld Posted June 8, 2009 Share Posted June 8, 2009 I have a div that's set to 100% height of the body, and 30 px; padding-top. The div is combining 100% height and the padding and making the page scroll, what am I doing wrong? I thought padding only effected the inside of the div tag, pushing anything in it down 30 pixels, not adding to its total height. Thanks in advance. Quote Link to comment Share on other sites More sharing options...
gevans Posted June 8, 2009 Share Posted June 8, 2009 Try setting a bottom-padding of -30px Only if you don't plan to have anything bellow it Quote Link to comment Share on other sites More sharing options...
lupld Posted June 8, 2009 Author Share Posted June 8, 2009 Thanks, I always make things harder than they are, I was using transparent backgrounds for divs to allow users to make a choice of bg color, and no matter what they picked the image would still look nice for the styling. I had it stuck in my head the divs holding the content had to be black backgrounds with 80% opacity, but reading your post made me realize I could do the same thing with the containing div to get the same effect. I've been playing with the CSS for an hour trying to get it to work, thanks for the help. Still, that is curious behavior, that isn't how it's supposed to work, is it? the padding-top? Quote Link to comment Share on other sites More sharing options...
gevans Posted June 8, 2009 Share Posted June 8, 2009 padding-top does do that, as you're adding the padding to the size of the div. If you set a div to 200px and give it a 50px top padding, it will cover an height of 250px. Why are you setting the div to 100%? If it's for a sticky footer, what happens when the page requires scrolling? There is a very nice bit of css avaiable to do that now! Quote Link to comment Share on other sites More sharing options...
lupld Posted June 8, 2009 Author Share Posted June 8, 2009 here's the code I'm using right now <div id="bgcontainer" align="center"> <div class="container" id="container"> <div class="subcontainer" id="subcontainer" align="center" style="min-height:100%;"> </div> </div> </div> The body is signed a gradient background with y-repeat and it puts it in the top left, bgcontainer does the same with a mirror image on the right, and then container takes the place of a scroll bar for the page, and subcontainer sets left and right margins for the page. Subcontainer also has a black background and is set transparent. At the desired resolution, the margin is enough to seperate the three different transparencies, and I like the effect, but even at smaller window sizes or screen resolutions it will still make a nice background where the user can pick the color. There's not a lot of work done yet, I'm going to add in php, but I work on parts of it here and there. The site isn't on a server yet, or I'd just give you a link to see what I've done. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.