div background color to fill to container boundary

[tbirnseth]

I have a problem I thought someone might be able to help me with. I've read various articles about using 'height:auto' in the container and/or 'display:block' but none seem to work. So I thought I'd ask here directly.

I have a page where I'm creating pseudo table structure using divs. I.e.
<div id="edit" style="background-color:#99FF99; layer-background-color:#99FF99;" >
<div id="cfgName" style="background-color:#99FF99; layer-background-color:#99FF99;">some stuff</div>
<div id="cfgType" style="background-color:#99FF99; layer-background-color:#99FF99;">more stuff</div>
<div id="cfgValue" style="background-color:#99FF99; layer-background-color:#99FF99;"> more stuff</div>
<div id="cfgComment" style="background-color:#99FF99; layer-background-color:#99FF99;"> maybe multiple lines of stuff that expand wider than the div</div>
</div>

Relevant CSS is:
div.edit {
float: none;
clear:both;
height:auto;
margin: 0px 0px 2px 0px;
}
div.cfgName {
float:left;
width:17%;
text-align: left;
}
div.cfgType {
float: left;
width:10%;
text-align: center;
}
div.cfgComment {
padding-left:5px;
float: left;
width:25%;
text-align:left;
}

First off I know I should be somehow using the color in CSS but it's variable dependent on another value and I don't know how to do this conditionally in CSS2. But that's not the main problem.

The main problem is that if/when the comment div goes to more than one line, the other divs end up with white space below. I need to know how to get these divs to fill to the bottom of the parent 'edit' container (or make them transparent so that they pass through the color of the container). I've tried using 'height:100%' and it doesn't seem to have any effect. I'm using Firefox and will do the necessary IE hacking after I get it working in Firefox.

Any suggestions? I'm sure it's something simple but I don't know what it is.

thanks,
tony
P.S. Use PHP to generate the page...

[chrisrock79]

If you are using CSS to create a table appearance (table with one row, 4 columns, please post the css used for that effect. I could be misunderstanding your question, but you could add text to any of the div's you gave and the bg color stay the same.
Chris

[Kravvitz]

http://www.google.com/search?q=faux+columns

[tbirnseth]

I thought I'd posted the relevant CSS. But here's the divs and the container that are used. (note: this is an excerpt of a page that has maybe 50 rows.

tony

#divCfgMiddle {
padding-left: 10px;
margin: 0px 0px 0px 0px;
text-align:left;
float: left;
width:100%;
}
div.edit {
float: none;
clear:both;
margin: 0px 0px 2px 0px;
}
div.noedit {
float: none;
clear:both;
margin: 0px 0px 2px 0px;
}
div.cfgCkBoxAdd {
float: left;
width:5%;
text-align: center;
}
div.cfgCkBoxDelete {
float: left;
padding-left:10px;
width:5%;
text-align: center;
}
div.cfgName {
float:left;
width:17%;
text-align: left;
}
div.cfgLevel {
float:left;
width:10%;
text-align:center;
}
div.cfgType {
float: left;
width:10%;
text-align: center;
}
div.cfgValue {
float: left;
width:20%;
text-align:left;
}
div.cfgComment {
padding-left:5px;
float: left;
width:25%;
text-align:left;
}
div.cfgAction {
float: none;
clear: both;
text-align:center;
}

And a chunk of the generated html source is:

<form name="cfgDataForm" id="cfgDataForm" method="post" action="/evtmgr/admin/editconfig.php?cfgEntID=1">
<div class=edit style="background-color:#99FF99; layer-background-color:#99FF99">
<div class="cfgCkBoxAdd" style="background-color:#99FF99; layer-background-color:#99FF99">&nbsp;
</div> <!-- ckBox -->
<div class="cfgName" style="background-color:#99FF99; layer-background-color:#99FF99">Debug
<input type="hidden" name="pName[Debug]" value="Debug" />
</div> <!-- cfgName -->

<div class="cfgLevel" style="background-color:#99FF99; layer-background-color:#99FF99">default
</div> <!-- cfgLevel -->
<div class="cfgType" style="background-color:#99FF99; layer-background-color:#99FF99">
<select name="pType[Debug]" id="" style="background-color:#99FF99;" >
<option value="1"> string </option>
<option value="2"SELECTED > bool </option>
<option value="3"> int </option>

<option value="4"> path </option>
<option value="5"> prompt </option>
</select>
</div> <!-- cfgType -->
<div class="cfgValue" style="background-color:#99FF99; layer-background-color:#99FF99">
<label>

<input style="background-color:#99FF99;" type="radio" name="pValue[Debug]" value="1"/>True&nbsp;&nbsp;
</label>
<label>
<input style="background-color:#99FF99;" type="radio" name="pValue[Debug]" value="0" CHECKED
/>False</label>
</div> <!-- cfgValue -->
<div class="cfgComment" style="background-color:#99FF99; layer-background-color:#99FF99">
<input style="background-color:#99FF99;" style="width:100%;" type="text" name="pComment[Debug]" value="Debugging on or off. This is a long comment so it should cause the non-fill behavior I'm having trouble with." />

</div> <!-- cfgComment -->
<div class="cfgCkBoxDelete" style="background-color:#99FF99; layer-background-color:#99FF99">
<input style="background-color:#99FF99;" type="checkbox" name="pDelete[Debug]" value="Debug" />
</div> <!-- ckBoxDelete -->
</div> <!-- class -->
<input type="hidden" name="id[Debug]" value="Debug" />
<input type="hidden" name="EntID[Debug]" value="1" />

<input type="hidden" name="ComID[Debug]" value="0" />
<input type="hidden" name="SitID[Debug]" value="0" />
<input type="hidden" name="UsrID[Debug]" value="0" />
<input type="hidden" name="id[userDB]" value="userDB" />
<input type="hidden" name="EntID[userDB]" value="1" />
<input type="hidden" name="ComID[userDB]" value="0" />
<input type="hidden" name="SitID[userDB]" value="0" />
<input type="hidden" name="UsrID[userDB]" value="0" />
<div class="cfgAction">

<p>&nbsp;</p>
<input type="submit" value="Write Config File" name="Write" />
&nbsp;&nbsp;
<input type="submit" value="Update/Add Parameter Changes" name="Update" />
<input type="hidden" name="updateConfig" value="updateConfig" />
</div> <!-- cfgAction -->
</form></div>

[tbirnseth]

http://www.google.com/search?q=faux+columns

I'm not sure this is addressing the same problem. I essentially have 7 floated divs that make up a "row" of information within 2 container divs (one for the page section and one for the row). It's probably easiest to show you the example by giving you the link to the page and letting you see what I end up with. The link is: http://pdx1.1sit.com/evtmgr/admin/ed...php?cfgEntID=1

Notice that the line for the parameter "cfgCompanyName" (2nd confuration area of the page - the ones with gray background) has a longer comment and the other divs do not stretch down to fill the space. Hence there's a blocky chunk of white space on the type of rows.

Since I don't know how much text will be associated with a comment I can't arbitrarily come up with a "row height" that would be relevant. Maybe using a table in this case would be better suited but I wanted to get the div stuff working. It's much easier to manage once it's designed and implemented.

Appreciate any help anyone has.

tony

[Kravvitz]

That actually is tabular information, so you should use a <table> in this case.

Why didn't you put the background color on the <div> that contains each row?

[tbirnseth]

Why didn't you put the background color on the <div> that contains each row?

It is, the <div class="edit"> is the row container. That's why I don't know what's wrong.

tony

[Kravvitz]

Looks like you need to make those <div>s contain their floated children.

http://www.csscreator.com/attributes/containedfloat.php
http://www.positioniseverything.net/easyclearing.html
http://css-discuss.incutio.com/?page=ClearingSpace

[NogDog]

After all the floated divs and just before the end of the containing div, add a <div class="clear"></div> styled as:

.clear {
  clear: both;
  height: 1px;
  margin: 0;
  padding: 0;
  line-height: 1px;
  font-size: 1px;
}

[tbirnseth]

NogDog, you did it again! That makes it behave as I would have expected.

Can you tell me why it doesn't work without the class="clear" tag? Seems like it's stuffing something there that shouldn't have to be there.

I'm assuming it ends up creating an empty (but potentially 1px high) area that broadens the bottom of the parent container?

tony

[Kravvitz]

Read the pages that I linked to they explain what that code does.

I prefer Tony Aslett's approach.

[NogDog]

The basic problem is that floating an element takes it out of the normal flow, so the containing block does not reserve space for it.