css layout question
- Started
- Last post
- 20 Responses
- kinetic
basically i want a box on my site and i want there to be 12px margins on the top and bottom. i can get it to work fine for the top and the bottom does have 12px between it and the browser window but the container stretches beyond the actual height of my browser so i have to scroll down to see that 12px of space
i cant figure out where the extra height is coming from
basically what i did is made a main container 780px wide and 100% and i made the padding 12px... then i put a div container inside that one with a bg color ... so it makes a box with 12px on top and bottom .. but for some reason it stretches beyond the browser height
any ideas?
- elahon0
Got a sample?
- kinetic0
oops..sorry
- elahon0
Just try reducing your main container 24px to make up for the 2x 12px margin you’re using.
?
- kinetic0
if i could do browser height less 12 pixels that would do it ... not sure how to do that though, or if its even possible
- elahon0
Try taking it from
#sub_container
width: 640px;
to
width: 616px;
?
- kyl30
try taking the 100% out of your 'subcontainer'
- elahon0
Shit, I meant height.
- kyl30
try taking the 100% out of your 'subcontainer'
kyl3
(Mar 12 06, 19:18)that does work either, in FF at least
- thismanslife0
It's probably because you have height and padding defined together. If you must use 100% height, put another div inside the container with the dimensions, just for the padding (NB. With no size specifications on, just padding!)
ie.
[div id=dimensions]
[div id=padding]*more layout / content here*
[/div]
[/div]
- fifty500
It's a bit of a cheap way out, but try this:
- thismanslife0
Fifty : I'm pretty sure that's not a great idea.
If the page content exceeds the height of the page (ie. the page needs to scroll) the bottom white chunk will overlap the content (since the positioning only puts it to the bottom of the window, not the bottom of the content)...
Right?
Besides, It's a really simple problem. The dimensions and padding just need to be seperated (because 100% height + padding = bigger than 100% height! Therefore, the page always scrolls by the value of the padding, doesnt matter how big you make the browser, it will always scroll that same amount.)
- fifty500
wrong.
If you place an "absolute" positioned object inside a "relative" positioned object, the absolute stays inside the relative object. reload my link for an example of a content with height of 10000px.
- fifty500
Okay I changed the #content div's height to 400px so you can see that without scroll, the padding is still there, but resize your browser window until a scroll bar appears and the white will still be at the bottom of the content, but will not overlap anything.
- thismanslife0
Aaah, impressive. But, I was SURE that it's like, one of the CSS holy grails to position something at the bottom of the page like that, either at the bottom of the page, or at the bottom of the content, whichever is bigger. Hmmm...
It's still a complicated way to do something as basic as padding!!!
- fifty500
it's not TOO complicated, but it is a pretty gritty way of doing something that was so easy with tables.
- epill_0
i learnt a lot here, thanks!!
i think i have that issue on my site as well, just didnt know how to ask...the jargan is still blurry to me but a lot of it registered.
- fifty500
no problem :)
A List Apart is our friend
http://www.alistapart.com/articl…
- fifty500
ah, here's how to center vertically and horizontally, too.
- kinetic0
awesome ... css gurus!
thanks guys :) ill give this a shot when i get home tonight
- fifty500
just a side note: it works in Safari, IE5/win and Firefox but there's a slight display issue with Opera. Some more digging around should fix it though.