CODEWITHSUNDEEP
javascriptjquerycss
Rahul Desai
Rahul Desai

Reputation: 15501

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

Upvotes: 0

Views: 60

Answers (2)

Praveen Govind
Praveen Govind

Reputation: 5627

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

Upvotes: 0

techfoobar
techfoobar

Reputation: 66663

<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/

Upvotes: 3

Related Questions