h3 shifting after it fades in or out


I have been finishing up this website redesign and wanted to add some fun new functions into it. I have a contact form nested in the footer to keep it out of sight but, not out of mind. :p I have the script working very well and the fadeToggle does the trick just fine but the main header, acting as the click element, seems to twitch side to side when activated. I am only hiding the li and not the ul or h3 so I am not to sure why it's moving. Any ideas would be greatly appreciated! This is not life or death to me but it does annoy the hell out of me ha.

Live site

jsFiddle before fix

jsFiddle fixed


<div class="formS">
    <span class="footerT">© Copyright 2013 Ohio Association of Health Underwriters</span>
    <form action="" method="post">
        <h4>Contact Us (click here)</h4>
        <input type="hidden" name="subject" value="Submission" /> 
        <input type="hidden" name="redirect" value="thankyou.html" />
        <li><label for="name">Name</label>
        <input type="text" name="name" id="name"></li>

        <li><label for="zip">Zip</label>
        <input type="text" name="zip" id="zip"></li>

        <li><label for="city">City</label>
        <input type="text" name="city" id="city"></li>

        <li><label for="telephone">Telephone</label>
        <input type="text" name="telephone" id="telephone"></li>

        <li><label for="email">Email</label>
        <input type="text" name="email" id="email"></li>

        <li><label for="comments">I would like to know:</label>
        <textarea name="comments" id="comments" cols="40" rows="5"></textarea></li>

        <li><button name="submit" type="submit" class="submit" id="submit" value="Submit">Submit</button></li>

        <input type="hidden" name="form_order" value="alpha"/>
        <input type="hidden" name="form_delivery" value="hourly_digest"/>
        <input type="hidden" name="form_format" value="text"/>


/* Contact form page */

.formS {
width: 960px;
margin: 0 auto;
padding: 0;

form > ul           {
font-size: 18px;
padding: 0;
margin: 0;
float: right;

form > ul > li {
padding: 5px;
display: none;

form { 
padding: 0 10px 10px 10px;
height: 408px;

.formS > form > ul > li > label     {
float: left;
width: 50px;
margin:5px 10px 0 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;

input:focus, textarea:focus {
background: rgba(0, 0, 0, 0.1);
border-radius: 5px;
color: #fff;
text-shadow: 0 1px 0 #2b2b2b;

textarea {
width: 150px; 
height: 50px;
border: 3px solid rgba(255, 255, 255, 0.5); 
background: rgba(0, 0, 0, 0.1); 
border-radius: 5px;
box-shadow: 0 1px 3px #2b2b2b inset;
resize: vertical;

.formS > form > ul > li > input {
width: 150px; 
height: 15px;
border: 3px solid rgba(255, 255, 255, 0.5); 
background: rgba(0, 0, 0, 0.1); 
border-radius: 5px;
box-shadow: 0 1px 3px #2b2b2b inset;


$('form ul h4').on('click', function() { 
    $('form > ul > li').stop(true).fadeToggle(1500); 

(P.S. I do know that input tags can not go inside a ul and am currently fixing the previous developers mistakes on this contact form >.>. At least I only had to deal with myself for the rest of this site's design/development!)

Problem courtesy of: Josh Powell


The width of the <ul> is determined by the visible items inside it. You need to specify a width on the <ul> that is as wide as the fully visible version of the contact form. For example:

form > ul {
    width: 240px;
Solution courtesy of: zigdawgydawg


Your header is left-aligned, and revealing the form widens the parent element, expanding it to the left. Try right-aligning the header - then it will stay right aligned no matter how wide the container becomes.

Discussion courtesy of: David Millar

This recipe can be found in it's original form on Stack Over Flow.