Don't seem to have control over a class tag in css

I have a class declared as an error catch for specific input:

'<span class="catch">Error caught</span>';

I styled it a bit at the end of my tags:

.catch{
    font-size: 20px;
    color: #ffffff;
    font-family: arial;
    margin: 150px 0px 0px 35px ;
}

The margin attributes are just place holders, but I am attempting to move the text down to the bottom of the this form, but can only control the x-axis, not the y-axis. Is there ways around this? Here is my form code:

#main{ 
    width: 375px; 
    height: 150px; 
    background: url(images/formheader.png) 0 0 no-repeat; 
    margin:200px auto; 
    z-index: 1; 

}

There is additional css if I need to provide more info.

EDITED:

#main{ 
   width: 875px; 
   height: 350px; 
   background:开发者_JS百科 url(images/form.png) 0 0 no-repeat; 
   margin:250px auto; 
   z-index: 1; 
 }

<span> is an inline element and only x-axis margins work on inline elements. Set .catch to display:block;

Based on @Czechnology comment, changing the <span> to a <div> makes more sense than taking an inline element and setting it to block.

It´s hard to tell what you want to do exactly without seeing the html, but if you want .catch to appear at the bottom of #main you can use something like:

.catch{
    position: absolute;
    bottom: 0;
}
#main{ 
    position: relative;
    padding-bottom: 100px;    /* example to avoid content of #main to be under .catch */
}