Ok.. I'm kinda new to CSS.. last time i used it was years and years ago when it was first coming on to the scene. I apparently have forgotten a lot since then and a lot has changed =] Basically, i'm trying to create a div that is centered vertically on the page, and that expands vertically to contain the content i put in it. I can give it an absolute size, but I'd rather have it be more easily modified in the future. I created something that works great in Firefox, Safari, and Chrome.. but IE7 for some reason pushes the div off to the right side, and I can't get it to center. the page I'm having an issue with is at: http://www.credotrio.com/bio.html CSS: .body { text-align: center; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 100%; } div.autosize { display: table; width: 1px; text-align: center; margin-right: auto; margin-left: auto; } div.autosize > div { display: table-cell; text-align: center; margin-right: auto; margin-left: auto; } #container{ margin-right: auto; margin-left: auto; width: 750px; text-align: center; } #main { background: url(images/bg.jpg); background-repeat: repeat-y; width: 750px; height: auto; border-top: 1px solid #fff; border-bottom: 1px solid #fff; } #footer { padding-top: 20px; text-align: center; float: bottom; color:#fff; font-size: 10pt; font-family: Verdana, Arial, Helvetica, sans-serif; } #footer p { color: #660000; font-family: Verdana, Arial, Helvetica, sans-serif; text-align: center; font-size: 10pt; } #footer ul { list-style: none; float: top; margin:0; padding: 0px; position: relative; left: 75px; text-align: center; } #footer li { float: left; padding: 5px; width: 100px; display: block; text-align: center; } #footer li a { text-decoration: none; font-family:Verdana, Arial, Helvetica, sans-serif; font-weight: bold; font-size: 9pt; text-align: center; display: block; float: left; color: #600; } Code (markup): HTML: <body> <div id="container"> <div class="autosize"> <div id="main"> <img src="images/bg.jpg"> bio goes here - lots and lots and lots and lots of text. </div> </div> <div id="footer"> more bio stuff here....<br><br> <ul> <li><a href="#">home</a></li> <li><a href="#">listen</a></li> <li><a href="#">schedule</a></li> <li><a href="#">biography</a></li> <li><a href="#">pictures</a></li> <li><a href="#">contact</a></li> </ul><br><br> <p>The Credo Trio 2008 | Site Design: Chris Slowik</p> </div> </div> </body> Code (markup): Can anyone shed some light on this? Thanks in advance!
oh small side note... the page that is currently up at that link is using tables... i haven't uploaded the one i've been playing with. but even taking the tables out and having just plain text in the div, I have the same problem.
hmm.. that doesn't really seem to fix the problem. heres what its supposed to look like: heres what IE7 does to it: it only messes up that auto-sized div. everything else on the page that's centered (menu/footer) work fine.
well.. apparently i didnt need the auto-size div. i took that off, and it still sizes to the content, and is now centered. thanks anyway!
div.autosize > div { display: table-cell; text-align: center; margin-right: auto; margin-left: auto; } The css code was original from your code pasted here . Exam it carefully . You should remove ">" , even very tiny mistake will mess the theme . Try to remove ">" first and see if the theme work fine .
JustinOrder - that greater than sign is called a child selector, and given the stylesheet it is not a "mistake" http://www.w3.org/TR/CSS2/selector.html