CSS border resizing itself

I am new to CSS and I am having a 开发者_C百科problem with a border. I have a header with a border below it. I also have some text that is later added in with javascript.

The problem is, when the javascript text appears, it extends past the end of the header. This causes the border to extend as well.

Is there anything I can do to prevent this?

---

inside the CSS of your header, add these CSS definition:

overflow: hidden;
line-height: 32px;
height: 32px;

The height is only here to ensure the header height won't move, and the overflow will clip all content to the dimension of the header box. The line-height will cause the content to be centered vertically

---

[...] "This causes the border to extend as well.

Is there anything I can do to prevent this?"

Well, if the problem (as you explain it above) strictly only has to do with the border being to long, you should make a border with another element. Fx by placing a <hr> in the bottom of the header with this CSS:

hr.border
{
    position: absolute;
    bottom: 0;
    left: 0;
}

And then of course removing the bottom border from the header.