hellboy33333
New Member
I have a div, "top" inside of "theform", which I want to be centered and 2em for top-margin. It gets centered but is not 2em for top-margin. And -webkit-box-align: center; is not working either because I need "mainphoto" centered.Any ideas? Possibly margin collapsing? I couldn't find a fix for it if it is.http://jsfiddle.net/D2BC4/1/HTML\[code\]<div id="wrapper"> <body> <?php ?> <div id="theform"> <form> <div id="top"> <div id="mainphoto"> </div> <div id="title"> </div> </div> </form> </div> </body> </div>\[/code\]CSS\[code\]*{ font-size:100%; margin: 0em; padding: 0em;} body{ width: 100%;}#mainphoto{ display:-webkit-box; width:22em; height:17em; border:1px solid red;}#theform{ display:-webkit-box; -webkit-box-orient: vertical; width: 55em; overflow:auto; border:1px black solid;}#title{ display:-webkit-box;}#top{ -webkit-box-orient: horizontal; -webkit-box-align: center; margin: 2em auto; width: 50em; height:20em; overflow:auto; border:2px red solid;}#wrapper{ display:-webkit-box; -webkit-box-orient: horizontal; -webkit-border-radius:0.9em; box-shadow: 3px 10px 5px #888888; margin: 3em auto; width: 80em; height:52em;}\[/code\]