Here is the code I am working with:
<div class="head_title">
<img src="/path/to/image.png">
<h1 id="entryTitle">
<!--Cufon Font-->
</h1>
</div>
I am trying to make the img element stretch to the full width of the 'head_title' div. However, I am facing issues when attempting to set the 'head_title' div to be as wide as the 'entryTitle' child h1 tag. Below is the CSS code I have been using:
.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;
}
The background for the parent div is within the img element itself - I prefer not to use the CSS background-image attribute since the parent div's width is dynamic and a static background image might get cut off.
I attempted using JavaScript's outerWidth, jQuery's .css("width"), and .width() methods but none seem to resolve the issue.