www.webdeveloper.com
Results 1 to 12 of 12

Thread: div background color to fill to container boundary

  1. #1
    Join Date
    Sep 2005
    Location
    Portland Oregon
    Posts
    153

    div background color to fill to container boundary

    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...

  2. #2
    Join Date
    Feb 2005
    Posts
    75
    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
    Last edited by chrisrock79; 09-27-2005 at 11:24 PM.
    I'm on a well-formed mission.

  3. #3
    Join Date
    Jul 2005
    Location
    USA
    Posts
    3,910
    Learn CSS. | SSI | PHP includes | X/HTML Validator | CSS validator | Dynamic Site Solutions

    Design/program for Firefox (and/or Opera), apply fixes for IE, not the other way around.

    Check out my blog.

  4. #4
    Join Date
    Sep 2005
    Location
    Portland Oregon
    Posts
    153
    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>

  5. #5
    Join Date
    Sep 2005
    Location
    Portland Oregon
    Posts
    153
    Quote Originally Posted by Kravvitz
    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
    Last edited by tbirnseth; 09-28-2005 at 03:03 AM.

  6. #6
    Join Date
    Jul 2005
    Location
    USA
    Posts
    3,910
    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?
    Last edited by Kravvitz; 09-28-2005 at 10:25 PM. Reason: typo
    Learn CSS. | SSI | PHP includes | X/HTML Validator | CSS validator | Dynamic Site Solutions

    Design/program for Firefox (and/or Opera), apply fixes for IE, not the other way around.

    Check out my blog.

  7. #7
    Join Date
    Sep 2005
    Location
    Portland Oregon
    Posts
    153
    Quote Originally Posted by Kravvitz
    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

  8. #8
    Join Date
    Jul 2005
    Location
    USA
    Posts
    3,910
    Learn CSS. | SSI | PHP includes | X/HTML Validator | CSS validator | Dynamic Site Solutions

    Design/program for Firefox (and/or Opera), apply fixes for IE, not the other way around.

    Check out my blog.

  9. #9
    Join Date
    Aug 2004
    Location
    Ankh-Morpork
    Posts
    18,933
    After all the floated divs and just before the end of the containing div, add a <div class="clear"></div> styled as:
    Code:
    .clear {
      clear: both;
      height: 1px;
      margin: 0;
      padding: 0;
      line-height: 1px;
      font-size: 1px;
    }
    "Please give us a simple answer, so that we don't have to think, because if we think, we might find answers that don't fit the way we want the world to be."
    ~ Terry Pratchett in Nation

    eBookworm.us

  10. #10
    Join Date
    Sep 2005
    Location
    Portland Oregon
    Posts
    153

    Solution Found!

    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

  11. #11
    Join Date
    Jul 2005
    Location
    USA
    Posts
    3,910
    Read the pages that I linked to they explain what that code does.

    I prefer Tony Aslett's approach.
    Learn CSS. | SSI | PHP includes | X/HTML Validator | CSS validator | Dynamic Site Solutions

    Design/program for Firefox (and/or Opera), apply fixes for IE, not the other way around.

    Check out my blog.

  12. #12
    Join Date
    Aug 2004
    Location
    Ankh-Morpork
    Posts
    18,933
    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.
    "Please give us a simple answer, so that we don't have to think, because if we think, we might find answers that don't fit the way we want the world to be."
    ~ Terry Pratchett in Nation

    eBookworm.us

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles