Div does not expand to maximum width

Question

I have the following css class:

.CtractLabel
{
    font-weight:bold;
    padding: 2px;
    text-align:left;
    /* width:120px; */
    width:150px;
    float:left;
    border-bottom:solid 1px #aaaaaa;
    border-right:solid 1px #aaaaaa;
    background: white url('../Images/GridHeaderBg.gif') repeat-x bottom;
}

On my page, I have a a div with text that is less than 150px. However, the div does not expand to 150px, but contracts around the text. Is there a way to force the div to be precisely 150px regardless of the length of the text in the div?

Answer 1

The default value for the width of a div element is auto, which causes it to take up all available space horisontally.

If you don't get this behaviour, there are some possible causes:

• You have made it a floating element.
• You have specified a width for it somehow, perhaps indirectly.
• You have some other element taking up space.

To see exactly what CSS applies to an element, and exactly where elements are, you can use the FireBug plugin in Firefox.