Overlapping divs preventing form use

Question

We have a signup form aligned on the RHS of the content column. The content wraps nicely around the form which is desired.

The problem is the content div appears to overlap the form div preventing users from interacting with the form (Chrome and FF). Oddly it appears to work in IE.

For the form we are currently using:

float: right;

http://www.connecttherapy.com/our-services/

This looks great, the content wraps nicely, but we can't interact with the form.

Attempted solutions

1. Reduce the width of the content div but then it wouldn't wrap under the form as desired.

2. We have also tested

   position: relative;
   top: 3px;
   left: 485px;
   z-index: 1;
   

   http://www.connecttherapy.com/test/signup-form/

With this solution we can interact with the form but it pushes the content down below the height of the form.

3. Have also played with

   clear:right
   clear:left
   

properties, but this didn't seem to help.

I'm sure the peeps on these boards will have a very simple, elegant solution which is currently eluding us. Thanks in advance!

Answer 1

I have re-created the problem in this runnable snippet (note that the input cannot be interacted with):

.content {
	position: relative;
}
.form {
	float: right;
	height: 100px;
	width: 200px;
	background: #CCC;
	margin: 0 0 0 20px;
}

<div class="form">
		<input type="text" />
	</div>
  <div class="content">
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus condimentum mauris leo, vitae venenatis dolor euismod a. Quisque at tortor luctus, consequat elit non, ornare augue. Nulla consequat lectus a ante fermentum auctor. Ut augue libero, aliquam sit amet ex sed, auctor fermentum quam. Praesent dignissim cursus eros non iaculis. Integer aliquet sodales ipsum, vel ornare justo ullamcorper non. Maecenas aliquet orci quis diam tempus varius. Cras eu eros semper, malesuada libero in, ullamcorper lectus. Aenean ornare suscipit magna eu varius. Quisque lacinia sed est eget viverra. Morbi blandit justo non augue mollis sagittis.
	</div>

Option One

Move the sign-up form inside div#goldp_post_81 and remove the forms top margin. This will correct the z-levels. This order makes more sense as the content of div#goldp_post_81 is wrapping around the forms parent div.

HTML

<div class="goldp_content" id="goldp_post_81" style="position:relative;">
    <div id="inner-signup-box-test"></div>
</div>

CSS

#inner-signup-box-test {
    background: transparent url(images/signup-bg-compact.jpg) no-repeat scroll 0px 2px;
    float: right;
    height: 225px;
    width: 160px;
    margin: 0 0px 15px 15px; /* <-- no more top margin */
}

Here is my re-creation fixed by moving the div inside (input now reacts to pointer events):

.content {
	position: relative;
}
.form {
	float: right;
	height: 100px;
	width: 200px;
	background: #CCC;
	margin: 0 0 0 20px;
}

  <div class="content">
		<div class="form">
		<input type="text" />
	</div>
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus condimentum mauris leo, vitae venenatis dolor euismod a. Quisque at tortor luctus, consequat elit non, ornare augue. Nulla consequat lectus a ante fermentum auctor. Ut augue libero, aliquam sit amet ex sed, auctor fermentum quam. Praesent dignissim cursus eros non iaculis. Integer aliquet sodales ipsum, vel ornare justo ullamcorper non. Maecenas aliquet orci quis diam tempus varius. Cras eu eros semper, malesuada libero in, ullamcorper lectus. Aenean ornare suscipit magna eu varius. Quisque lacinia sed est eget viverra. Morbi blandit justo non augue mollis sagittis.
	</div>

Option Two

If you can't move the HTML around, then the solution of Ghos does work, make sure it is floated to the right and there are no left, top, bottom or right properties.

#inner-signup-box-test {
    position: relative;
    z-index: 1;
    float: right;
}

Option two example:

.content {
	position: relative;
}
.form {
	position: relative;
	z-index: 1;
	float: right;
	height: 100px;
	width: 200px;
	background: #CCC;
	margin: 0 0 0 20px;
}

<div class="form">
		<input type="text" />
	</div>
  <div class="content">
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus condimentum mauris leo, vitae venenatis dolor euismod a. Quisque at tortor luctus, consequat elit non, ornare augue. Nulla consequat lectus a ante fermentum auctor. Ut augue libero, aliquam sit amet ex sed, auctor fermentum quam. Praesent dignissim cursus eros non iaculis. Integer aliquet sodales ipsum, vel ornare justo ullamcorper non. Maecenas aliquet orci quis diam tempus varius. Cras eu eros semper, malesuada libero in, ullamcorper lectus. Aenean ornare suscipit magna eu varius. Quisque lacinia sed est eget viverra. Morbi blandit justo non augue mollis sagittis.
	</div>

Answer 2

#inner-signup-box-test {
    position: relative;
    z-index: 1;
}

try this, hope it helps.