Help with a curved image appearing in wrong spot on page?

The problem is caused by the "float: left;" in this css on the ol.forms and li tags of the "contact-page" id element: http://cisrd.com/wp-content/themes/athena/style.css?ver=3.4.2

It only happens on the contact page, because I am assuming the id "contact-page" is only used here.

First remove the "float:left;" from the "#contact-page ol.forms" and "#contact-page ol.forms li"

#contact-page ol.forms {
    clear: both;
    float: left;
    list-style: none outside none;
    width: 100%;
}

#contact-page ol.forms li {
    clear: both;
    float: left;
    margin-bottom: 1.618em;
    position: relative;
    width: 48%;
}

Select all Open in new window

Then add the floats to the li tags individually (feel free to add id's and then do it in css if you wish), so that the Name has a left float, Email a right float, and Message a clear:both:

<ol class="forms">
<li style="float:left;">
<label for="contactName">Name</label>
<input id="contactName" class="txt requiredField" type="text" value="" name="contactName">
</li>
<li style="float:right;">
<label for="email">Email</label>
<input id="email" class="txt requiredField email" type="text" value="" name="email">
</li>
<li class="textarea" style="clear:both;">
<label for="commentsText">Message</label>
<textarea id="commentsText" class="requiredField" cols="30" rows="20" name="comments"></textarea>
</li>

Select all Open in new window