I am working on a webpage where I am trying to arrange 4 div areas.

1. input - user can enter data here in a form
2. output - output will be displayed here (echoing from php)
3. sumbit - contains a submit button that can be used to submit the form data
4. save - this section contains a save button which can be used to save\email the output section data

I am using below code to to create html:

```
<div class="input">

        INPUT
</div>

<div class="output">

             OUPUT
</div>

<div class="submit">

          SUBMIT
</div>              

<div class="save">

SAVE

</div>

```

and the css code:

```
.input{

width:45%;
float:left;
border-width:1px;
border-style:solid;
border-color:#ddd;
padding:10px;
     margin-bottom:10px;

}

.output{

width:45%;
float:right;
border-width:1px;
border-style:solid;
border-color:#ddd;
padding:10px;
    margin-bottom:10px;

}

.submit{
width:45%;
float:left;
border-width:1px;
border-style:solid;
border-color:#ddd;
padding:10px;
     margin-bottom:10px;

}

.save{

width:45%;
float:right;
border-width:1px;
border-style:solid;
border-color:#ddd;
padding:10px;

 margin-bottom:10px;

}

```

If all `div` sections have data, they are aligning properly.But here, since `output div` area getting data from a php script(echo the value), initially there will not be anything to display here.Due to that `divs` are not aligning properly. the `sumbit div` will occupy `output div` area.

How can i fix it ? I need to stick `submit div` eventhough there is no data in output.

I have setup a fiddle here. [**LINK**](http://jsfiddle.net/Qpc6F/) if you try removing the OUPUT from output div section, you will see the issue