Проблема установки родительской ширины div так же, как дочерняя ширина div

Question

У меня есть следующая разметка:

<div class="head_title">
  <img src="/path/to/image.png">
  <h1 id="entryTitle">
    <!--Cufon Font-->
  </h1>
</div>

Я хочу, чтобы элемент img растянулся на всю ширину div 'head_title'.Проблема возникает, когда я пытаюсь установить div 'head_title' так же широко, как дочерний тег h1 'entryTitle'.Вот CSS, который я использую:

.head_title {
    display:block;
    float:left;
    position:relative;
    height:40px;
}
.head_title img {
        height:100%;
        width:100%;
        display:block;
}
.head_title h1 {
        color:#fff;
        position:absolute;
        top:0;left:0;
        z-index:1;
        padding:0 0 0 5px;
}

Базовый элемент img содержит фон для родительского div - я не хочу использовать атрибут background-image CSS, потому что ширина родительского div будет постоянноизменения, и я не хочу, чтобы оно обрезало статическое фоновое изображение.

Я пытался использовать методы JavaScript outerWidth и jQuery .css("width") и .width(), но, похоже, ничего не работает.

Answer 1

Эти элементы имеют ширину 0px, потому что для свойства float:left назначено div.head_title. Из-за этого определения с плавающей точкой div не растягивается на полную ширину.

Ширина изображения равна 100%, ноль 100% равен нулю. Элемент h1 расположен абсолютно, поэтому ширина элемента также не увеличивается.

Чтобы увеличить ширину div.head_title, необходимо указать ширину (например, width:!00%) или удалить свойство float.

Answer 2

или вы также можете сделать это ....

<div class="head_title">
  <img src="/path/to/image.png">
  <h1 id="entryTitle">
    <!--Cufon Font-->
  </h1>
</div>

.head_title{
    float: left;
    position:relative;height:40px;
}
.head_title img {
    position:absolute;top:0;left:0;z-index:-1; width: 100%; height: 100%;
}
.head_title h1{color:#999;padding:0 0 0 5px;}

образец здесь