Code Snippet
Center DIV with Dynamic Height
CSS:
* { margin: 0; padding: 0; }
#page{display:table;overflow:hidden;margin:0px auto;}
*:first-child+html #page {position:relative;}/*ie7*/
* html #page{position:relative;}/*ie6*/
#content_container{display:table-cell;vertical-align: middle;}
*:first-child+html #content_container{position:absolute;top:50%;}/*ie7*/
* html #content_container{position:absolute;top:50%;}/*ie6*/
*:first-child+html #content{position:relative;top:-50%;}/*ie7*/
* html #content{position:relative;top:-50%;}/*ie6*/
html,body{height:100%;}
#page{height:100%;width:465px;}
HTML:
<div id="page">
<div id="content_container">
<div id="content">
<p>your content</p>
</div>
</div>
</div>
Reference URL
hai yo man its working
Very good script. Congrats!
Because the twitter is blocked in China.
So this lines of code used a very long time to load.
http://platform.twitter.com/widgets.js
Can optimize external javascript as load dynamic?
great….
very useful fool!
you mean tool, right??
FAIL. You can’t even copy the stuff from the page to try it.
Good stuff. …And I like the new site logo and fonts. ;)
So great !! It works IE7, IE8, FF 3.5
Thanks.
Forgive my ignorance, but why does the css have two identical id selectors? The 2nd line has #page{…} and the last line has it again (though affecting different things).
Why not combine them? Or is it for some reason I don’t understand?
This works wonderfully, thanks for sharing. I still get sick to my stomach when I have to consider IE hacks, but such is life.
@Brian, I tried combining the CSS for the 2 #page selectors and saw no change in rendering in Firefox. I surmise there’s a very selective reason why it’s been separated out (perhaps some sort of forethought to using it in a grander design?), however for this basic example, it seems to not matter.
– Jesse
PS, at the time of posting this, my portfolio site is quite raw; judge not, please.
Works just great. Much appreciated for this css trick and all the other snippets on offer…
great! thanks!
yeah! man………. it’z working :D thank u so much bro :D
Worked first time on an existing site, very pleased!! wanted to know how to do this forever.
DigWP
A book and blog co-authored by Jeff Starr and myself about the World's most popular publishing platform.
Quotes on Design
Design, like Art, can be an elusive word to define and an awfully fun thing to have opinions about.
HTML-Ipsum
One-click copy to clipboard access to Lorem Ipsum text that comes wrapped in a variety of HTML.
Bookshelf
Hey Chris, what books do you recommend? These, young fertile mind, these.