CSS сообщение об ошибке пузыря для формы

Я хочу создать окно ошибки для формы, как показано ниже.

Я уже задал окно ввода и использую проверку jQuery для отображения ошибок. Однако я не могу получить это поле ошибки правильно. Я думаю, что нужно положить, что вместе с тремя метками, но я не знаю, какие теги использовать (проверка JQuery использует label метку для отображения ошибки). Мой текущий код ошибки:

<label for="email">
  <span>Email:</span>
  <input type="text" id="email" name="email" class="error">
  <label for="email" class="error" style="">Az e-mail címet kötelező megadni</label>
</label>

Я должен сделать этот IE7 совместимым.

Я внесла следующие изменения:

  <div class="dataline">
  <div class="label">Label:</div>
  <div class="field"><input type="text" id="name" name="name" /></div>
  <div class="arrow"></div>
  <label class="error">Error text</label>
  <div class="ender"></div>
  </div>

Я установил arrow в качестве изображения для arrow класса, так что теперь она выглядит идеально. В основном я использовал 4 левых поплавковых элемента блока (метка, вход, стрелка и корпус пузыря). Теперь у меня только две проблемы: стрелка отображается даже тогда, когда нет ошибки. Как я могу скрыть его, когда label не после него? Моя другая проблема заключается в том, что контейнер div имеет ширину 800 пикселей и, если текст ошибки длинный, он переносится на следующую строку. Как я могу избежать этого?

Мой css:

    div.dataline {
    margin: 10px 0 0 0;
    white-space: nowrap;
    width: 3000px;
    owerflow: visible;
    height: 60px;
}

div.field {
    float: left;
}

div.label {
    float: left;
    width: 120px;
    margin: 20px 0 0 0;
}

div.arrow {
    background-image: url('gfx/redarrow.png');    
    margin: 7px 0 0 10px;
    background-repeat: no-repeat;
    width: 20px;
    height: 45px;
    float: left;
}

div.ender {
    background-image: url('gfx/bubbleend.png');    
    margin: 7px 0 0 0px;
    background-repeat: no-repeat;
    width: 3px;
    height: 45px;
    float: left;
}

label.error {    
    height: 27px;
    background-image: url('gfx/bubblemiddle.png');
    float: left;    
    padding: 9px;
    margin: 7px 0 0 0;
}