How to get div to fill parent on auto resize - html

Question

I am trying to make a ticket system, and it's designed to be similar to a forum thread system, ie have the user info on the left side like avatar and username, and then have the post data on the right hand side, I have managed to make a design for this in html/css and it works perfectly but there is an issue
As you can see when the right hand column stretches (due to it being filled with content, the left hand column doesnt stretch with it)
I have tried setting the height of the left-hand column to 100% to effectively fill its container but it doesn't seem to work
HTML:
<div class="ticket_content">
<div class="tickets_left"><img src="images/avatar_admin.png"/>
<div class="usernameinfo">ADMINISTRATOR</div>
<div clas="clear"></div>
</div>
<div class="tickets_right_admin"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p> </div>
<div class="clear"/></div>
</div>
CSS
.ticket_content {
width: 900px;
display: block;
border: 2px solid #171B1E;
border-radius: 6px;
background: none repeat scroll 0% 0% #121416;
margin-bottom: 22px;
box-shadow: 0px 0px 7px rgba(212, 198, 198, 0.79);
}
.tickets_right {
float: left;
width: 750px;
min-height: 185px;
background: none repeat scroll 0% 0% #121416;
}
.tickets_right_admin {
background: #353018;
float: left;
width: 750px;
min-height: 185px;
}
.tickets_right_admin p{
padding:18px;
}
.tickets_left {
float:left;
width: 141px;
background:red;
min-height: 185px;
background: url('../images/leftsiderepeat.png') repeat-y;
}
Again what i'm trying to achieve is have tickets_left fill ticket_content vertically when tickets_right stretches it (as you can see in the image the background of tickets_left does not follow the same height as the right hand side)

Answer 1

Fixed by using table cell display, for the inner-divs and table display for the outer div, also added
vertical-align:top
to the inner div's
Fixed css:
.tickets_left {
display: table-cell;
vertical-align: top;
width: 141px;
background:red;
min-height: 185px;
background: url('../images/leftsiderepeat.png') repeat-y;
}
.tickets_right {
display:table-cell;
float: left;
width: 750px;
min-height: 185px;
background: none repeat scroll 0% 0% #121416;
}
.tickets_right_admin {
display: table-cell;
background: #353018;
float: left;
width: 750px;
min-height: 185px;
}
.ticket_content {
display: table;
width: 900px;
border: 2px solid #171B1E;
border-radius: 6px;
background: none repeat scroll 0% 0% #121416;
margin-bottom: 22px;
box-shadow: 0px 0px 7px rgba(212, 198, 198, 0.79);
}

Answer 2

try the following style for inner div:
{
position: relative;
left: 0;
top: 0;
width100%;
height:100%;
}