Question

Take a look at this jsfiddle

I’m trying to make my div to the right use the entire width and height of the parent div.

Any idea what I’m doing wrong?

Here is the HTML

<div style="width:150px;padding:0;min-height:200px;">
  <div style="width:100%;background-color:#99CD4E;">
    <div style="width:35px;padding:5px;display:inline-block;border: solid 1px #ff0000;">
      <img src="/photos/files/5/main/small_thumb.jpg" class="thumb_small "/>    
    </div>
  <div style="height:100%;display:inline-block;border: solid 1px #ff0000;">user <strong>age</strong><br>town, state</div>
</div>

Answer 1

Instead of styling them with display:inline-block you could style the divs with display:table-cell and give that particular div a width of 100%.

jsFiddle example

<div style="width:150px;padding:0;min-height:200px;">
  <div style="width:100%;background-color:#99CD4E;">
    <div style="width:35px;padding:5px;display:table-cell;border: solid 1px #ff0000;">
      <img src="/photos/files/5/main/small_thumb.jpg" class="thumb_small "/>    
    </div>
  <div style="height:100%;width:100%;display:table-cell;border: solid 1px #ff0000;">user <strong>age</strong><br>town, state</div>
</div>