Question

I’ve created a simple page for processing three forms via jquery/ajax. Everything functions properly, but somehow I can’t seem to debug this simple CSS issue. I have a parent DIV, with three DIVs inside it, each one containing a form and the relevant success message when a form is submitted. If someone could take a look at it I would really appreciate it. You can find it here (LINK). The style sheet can be seen through the source and is really simple. I’ve included the gist of the page architecture below and the bit of CSS I’ve written.

HTML

<div id="wrap">

     <div class="form-container">
          <form></form>
          <div class="success">
               <p>Form Success!</p>
          </div>
     </div>

     <div class="form-container">
          <form></form>
          <div class="success">
               <p>Form Success!</p>
          </div>
     </div>

     <div class="form-container">
          <form></form>
          <div class="success">
               <p>Form Success!</p>
          </div>
     </div>

</div>

CSS

#wrap{
    width:900px;
    height:450px;
    margin:25px;
    padding:0;
    }

div.form-container {
    background:#9c9;
    width:300px;
    height:100%;
    float:left;
    position:relative;
    padding:0;
    }

div.success{
    background:#ffa07a;
    padding:0;
    margin:0;
    width:100%;
    height:100%;
}

form {
    background:#999;
    float:left;
    position:relative;
    padding:10px;
    }

You’ll notice that the second and third form containers have 19px margins at the top, however this isn’t reflected anywhere in the CSS. I’ve been trying to debug this for hours to no avail. I’m almost embarrassed to ask for help, as I know it must be something simple. I’ve moved virtually every element around to find the issue, but nothing changes it! I can get it working using negative margins to pull the two containers up, but I don’t think I should need that kind of fix.

Thanks for taking a look,

Mike

Answer 1

This might not be the only problem, but you have an id for the success div but your css is calling a success class.

<div id="success">

and your css is

div.success{
    background:#ffa07a;
    padding:0;
    margin:0;
    width:100%;
    height:100%;
}

Change your HTML to be

<div class="success">

EDIT:

In your text page, you have BRs after the divs. Remove those and everything lines up.