How to put span content on top of all other elements without wrapping?

I have a span next to each form element on a page that shows an error if there i开发者_运维问答s one. There are basically two columns on the page, a left and a right. I'm trying to get the span to display from the left column all the way across the page (not getting wrapped to a 2nd line at the boundries of the left column).

I've been playing around with positioning and z-indexes for a while and can't get it working, so I thought I'd post a jsfiddle to see if someone could help shed some light:

http://jsfiddle.net/zZ7MN/3/

.one_third, .two_third {
    float:left;
    margin-bottom:10px;
    margin-right:40px;
}

.formerror {
    position: absolute;
    width: auto;
    left: 320px;
    top: 45px;
    border: 1px solid #FF7878;
    background-color: #FFBABA;
    padding:4px 6px 4px 6px;
    color: #D8000C;
}

.formerror {
    position: absolute;
    width: 560px;
    overflow: visible;        
    border: 1px solid #FF7878;
    background-color: #FFBABA;
    padding:4px 6px 4px 6px;
    color: #D8000C;
    z-index: 999;
}

Dmitriy was close, his problem was that he was specifying a left attribute. When the position is changed to absolute this causes the span to move N amount of pixels from the left of the screen. Remove the left and give your span a set width and it will no longer wrap!!

Here is the solution in jsfiddle http://jsfiddle.net/zZ7MN/8/