Question

I have a page that should have text on the left and a form on the right. It looks (and renders) properly on most browsers (including Firefox, Chrome, and Safari).

Some versions of IE, however, keep the form in the correct position (top-right), but push the text all the way to the bottom of the page.

Here’s the code used to position the form:

.custom #conversion_form {
width: 300px;
border: 1px solid #999;
background-color: #e9e9e9;
padding: 25px 30px 25px 25px;
float: right;
display: block;
margin-left: 20px;
}

What tag(s) to I need to add to keep the text in the top left/avoid having it get pushed down?

Demo: http://rainleader.com/signup

Screenshot (How it Should Look):

Answer 1

When you are creating a side by side effect it’s always best to float the left content left, float the right content right, and overflow:hidden; both.

If you still see a problem, wrap both of the content in a <div> and overflow:hidden; that.