Question

This is my code:

.divUserRepCont
{
    position: absolute;

    top: 0;
    left: 105px;

    width: 195px;
    height: 25px;   
}

.divUserContCon
{
    width: auto;
    height: 100%;

    background-color: red;
}

.divUserCon
{
    width: 50px;
    height: 20px;
}

HTML:

<div class="divUserRepCont">
    <div class="divUserContCon">
        <div class="divUserCon">

        </div>
    </div>
</div>

I am expecting a red bar of width 50px, but instead the auto width “divUserContCon” is filling up the entire 195px of it’s parent div. Why is this?

EDIT:

The purpose of divUserContCon having an auto width is because of this:

divUserCon’s size will be changing dynamically, and it will have a background colour itself.

divUserContCon, will be the container for divUserCon, which itself will have a background colour AND padding.

So if divUserCon is 50px wide, with a green background, divUserContCon will be 50px wide (auto) + some padding and it’s background colour.

Answer 1

width:50px; 

Needs to be put in divUserContCon. You can’t rely on auto to only take up the width of any child divs.