CSS Width property not respected

Question

I am adding some formatted div tags to a site with virtuemart in Joomla. I have had success so far in this. I modified the template we are using to include a css file "article.css" which contains my custom content.

What i have is a div wrapper around two inline divs, both containing text. The first inline div has a given width, so that when you look at the text, the second div text will line up with eachother, as if tabbed. This works perfectly when run in my own test html file, but when i use this on the site, the width property is not working.

Using firefox's "Inspect Element", one can see that the div inherits a width and is not overridden, but it still shows up as if the width were never there!

This is my CSS:

div.Item_Property
{
    border: 2px solid black;
    padding-left: 5px;
    margin: 2px;
    font-size: 16px;
    width: 320px;
}

div.Property_Name
{
    display: inline;
    margin-right: 10px;
    color: #C41163;
    width: 240px;
}

div.Property_Value
{
    display: inline;
}

This is a snippet of my HTML:

<div class="Item_Property">
    <div class="Property_Name">SKU:</div>
    <div class="Property_Value">TL-5902/S</div>
</div>
<div class="Item_Property">
    <div class="Property_Name">Catalog #:</div>
    <div class="Property_Value">15-5902-21530</div>
</div>
<div class="Item_Property">
    <div class="Property_Name">Tadiran Series:</div>
    <div class="Property_Value">iXtra</div>
</div>

I really don't understand what is going on. In the past, if i had a CSS problem, FireFox's "Inspect Element" would indicate my CSS as being there, but being over-written. It does not show this in this case, but im guessing some setting from the site IS still goofing up my custom CSS

Does anyone see what is causing this? Thank you.

Answer 1

What I see from your posted code is that you are using width property on an inline element.

10.2 Content width: the 'width' property

This property does not apply to non-replaced inline elements. The content width of a non-replaced inline element's boxes is that of the rendered content within them (before any relative offset of children).

width/height properties are not applicable to non-replaced inline elements. If you want to keep div.Property_Name inline, you need to use inline-block as the value of display property.

div.Property_Name {
    display: inline-block; /* <-- Change the display type */
    margin-right: 10px;
    color: #C41163;
    width: 240px;
}

Answer 2

Inline elements do not respect a width declaration by nature. Try using inline-block