Q:

CSS border breaking

I am composing notifications that consist of a title and some description. And displaying it next to the form.
Composing elements in jQuery:
var $title = $('<span></span>').addClass('title').text($('#title').val());
var $description = $('<span></span>').addClass('description').text(plainText);
var $notification = $('<span></span>').append($title).append($description).addClass('notification');

CSS:
.notification{
    border: 1px solid red;
    margin: 10px;
}

Ideally, I would like the border to surround the title and description. What am I doing wrong here?
Fiddle

A:

<span> is an inline element by default. To force it to respect the rectangular dimensions of the content inside, use display: inline-block;
.notification{
    border: 1px solid red;
    margin: 10px;
    display: inline-block;
}

Demo: http://jsfiddle.net/7b3j2/20/

A:

Just add display:block; to .notification calss
.notification{
    border: 1px solid red;
    margin: 10px;
    display: block;
}

or change the notification wrapper to div instead span
var $notification = $('<div></div>').append($title).append($description).addClass('notification');

Demo: Jsfiddle

