1

alt text http://img14.imageshack.us/img14/2055/sof.jpg

HTML markup:

<div class="planRisk">
    <div class="innerPlanRiskRight"> 
        <div class="rmPlanFrequency">10 </div>
        <div class="rmPlanSeverity"> 5</div>
        <div class="rmPlanRiskFactor">50 </div>
        <div class="rmPlanNumSolutions">2</div>
        <div class="rmPlanPercentComplete">34% </div>
        <div class="rmPlanDeletePlanRisk"> X </div>
    </div>


    <div class="rmPlanRiskTitle"> Pandemic Influenza</div>

</div>

CSS:

.planRisk{background-color:#DEECD1; border:1px solid #BEBEBE;}
.innerPlanRiskRight{float:right; color:#000000;}

.rmPlanFrequency{float:left; width:46px;background-color:#d9dee1; text-align:center; border-right:1px solid #ebebeb; padding:0.2em;}
.rmPlanSeverity{float:left; width:46px; background-color:#dbe1d4; text-align:center; border-right:1px solid #ebebeb; padding:0.2em;}
.rmPlanRiskFactor{float:left; width:46px; background-color:#e5d5da; text-align:center; border-right:1px solid #ebebeb; padding:0.2em;}
.rmPlanNumSolutions{float:left; width:46px; background-color:#dae4e4; text-align:center; border-right:1px solid #ebebeb; padding:0.2em;}
.rmPlanPercentComplete{float:left; width:46px; background-color:#dddddd; text-align:center; padding:0.2em; }
.rmPlanDeletePlanRisk{float:left; width:30px; background-color:#DEECD1; text-align:center; padding:0.2em;}  
.rmPlanRiskTitle{padding:0.2em; }


.rmPlanSolutionContainer{background-color:#f0f9e8; border: 0 1px 1px; border-left:1px solid #CDCDCD; border-right:1px solid #cdcdcd; }
.innerSolutionRight{float:right;}
.rmPlanSolution{border-bottom:1px solid #CDCDCD; padding-left:1em;}
.rmPlanSolutionPercentComplete{float:left; width:46px; background-color:#E2EADA; padding-left:0.2em; padding-right:0.2em; text-align:center;}
.rmPlanDeleteSolution{float:left; width:30px; text-align:center; padding-left:0.2em; padding-right:0.2em; }
mskfisher
  • 3,291
  • 4
  • 35
  • 48
ErnieStings
  • 6,333
  • 19
  • 47
  • 54

4 Answers4

4

This is essentially an “equal column height” question. You can't directly set the child height to 100% because the height of the parent is indeterminate. There are workarounds. of various sorts.

But in your case: use a table. It's clearly tabular data, so there's nothing wrong with using a table for it.

Community
  • 1
  • 1
bobince
  • 528,062
  • 107
  • 651
  • 834
1

In this case I think it would be semantically acceptable to use tables, which would automatically behave the way you want.

willoller
  • 7,106
  • 1
  • 35
  • 63
0

I think this question is asked a lot. I found this on searching.

Community
  • 1
  • 1
neuroguy123
  • 1,355
  • 10
  • 14
0

What about setting 

min-height: inherit;

Works on modern browsers.

cetnar
  • 9,357
  • 2
  • 38
  • 45