Trying to center a Wufoo form in an iframe using CSS - html

Question

I'm using Wufoo for a web form. The form is in my page in an iframe. They let you use custom CSS to style the form. I'm trying to center the form in the iframe.
Here's the HTML I grabbed from the page when the form is displayed in the iframe:
<div id="container" class="ltr">
<form id="form2" name="form2" class="wufoo topLabel page1 hideHeader" accept-charset="UTF-8" autocomplete="off" enctype="multipart/form-data" method="post" novalidate="true" action="https://peakinbound.wufoo.com/embed/mtco4fp0qomvz2/def/&header=hide#public">
<ul>
<li id="fo2li1" class="notranslate">
<label class="desc" id="title1" for="Field1">
Name<span id="req_1" class="req">*</span>
</label>
<span>
<input id="Field1" name="Field1" type="text" class="field text fn" value="" size="8" tabindex="1" onkeyup="handleInput(this);" onchange="handleInput(this);" required="true" />
<label for="Field1">First</label>
</span>
<span>
<input id="Field2" name="Field2" type="text" class="field text ln" value="" size="14" tabindex="2" onkeyup="handleInput(this);" onchange="handleInput(this);" required="true" />
<label for="Field2">Last</label>
</span>
</li>
<li id="fo2li3" class="notranslate">
<label class="desc" id="title3" for="Field3">
Email<span id="req_3" class="req">*</span>
</label>
<div>
<input id="Field3" name="Field3" type="email" spellcheck="false" class="field text medium" value="" maxlength="255" tabindex="3" onkeyup="handleInput(this);" onchange="handleInput(this);" required="true" />
</div>
</li>
<li class="buttons ">
<div>
<input type="hidden" name="currentPage" id="currentPage" value="jssDPjBF2iK6t1UvInla0mSUbe82kYF5HwuBetLwuBe5y49jw=" />
<input id="saveForm" name="saveForm" class="btTxt submit" type="submit" value="GET INFO" onmousedown="doSubmitEvents();" />
</div>
</li>
</ul>
</form>
</div>
<!--container-->
I tried using this on the CSS but it didn't center the form.
#container {
width: 350;
height: 250;
margin:0 auto;
}
Any ideas on how to get this form centered?
Thanks for your help.

Answer 1

You need to declare a measuring unit in px.
http://jsfiddle.net/73TSr/10/
http://jsfiddle.net/73TSr/10/show
#iframe-container {
width: 350px;
height: 300px;
margin:0 auto;
}
#iframe-container > iframe {
overflow-y: auto;
border: none;
height: 100%;
width: 100%;
}