Background-color style in FF/chrome

Question

Does anyone know why my 'container' div isn't showing the white bg-color from it's parent divs? I'm getting the black (Lime in my example for better description) bg-color from the CSS body setting.

Please excuse the sloppy styling. I did my best to reduce the code and show relative stuff. BTW, I've tried making the 'container' div and it's child divs' style bg-color white; and it still doesn't work. When I give the highest div a large height attribute (say 1000px), it shows white to that point, but I thought I didn't have to do that. It should be dynamic: as the controls within the div expand, the divs height should expand as well. I have many pages like that, but don't have this problem.. but this is the only pg where I attempt column divs. And it happens right when my 'container' div for the columns start (see pic). and yea, this happens in FF and chrome. it works fine in IE

<head runat="server">
  <title>Loaner Transfer</title>
  <link rel="stylesheet" type="text/css" href="../styles/BodyLayout.css" />
  <link rel="stylesheet" type="text/css" href="../styles/columns.css" />
  <meta http-equiv="Content-Script-Type" content="text/javascript" />
  <script language="javascript" type="text/javascript">
    ....
  </script>
</head>
<body>
  <center>
  <div style="text-align:left; width:1160px; background-color:White; border-bottom-width:25px;">
  <div id="divBody">
    <form id="form1" runat="server">
      <ajx:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
      </ajx:ToolkitScriptManager>
      <img src="../images/_Logo.gif" alt="Logo" /><br />
      <UI:Header ID="UIHeader" runat="server" />
      <UI:Menu ID="UIMenu" runat="server" />
      <center>
        <h1>Transfer Loaned Items</h1>
        <asp:Label ID="lblStatus" runat="server" ForeColor="red"></asp:Label>
        <br />
        <asp:ValidationSummary ID="ValidationSummary1" runat="server" ValidationGroup="ISO" />
        <asp:ValidationSummary ID="ValidationSummary3" runat="server" ValidationGroup="add" />
        <asp:ValidationSummary ID="ValidationSummary2" runat="server" ValidationGroup="header" />
      </center>
      <br />
      <div id="container" style="width:1140px;">
        <div id="col1" style="width:400px;">
          <h2 style="text-decoration:underline; text-align:center;">Search and select items to transfer</h2>
          <div style="margin-left:25px;">  
            <asp:Label ID="Label1" runat="server" Font-Bold="true" Text="Pull ISO"></asp:Label>
            <asp:CustomValidator ID="CVSearch" runat="server" ErrorMessage="Invalid ISO entry."
              ControlToValidate="txtSearchISO" ValidationGroup="ISO" ValidateEmptyText="true"
              ClientValidationFunction="CheckMyText">*</asp:CustomValidator>
            <asp:TextBox ID="txtSearchISO" runat="server" Width="50px"></asp:TextBox>
            <asp:Button ID="btnSearchISO" runat="server" Text="Go!" ValidationGroup="ISO" OnClick="btnSearchISO_Click" />
            <asp:Label ID="lblHidISO" runat="server" Text="-1" Visible="false"></asp:Label>
            <br />
            <br />
            <table>
            .....
            </table>
            <br />
          <center>
            <asp:DataGrid.............................</asp:DataGrid>
          </center>
        </div>
        <div id="col2outer" style="width:710px;">  
        <center>
        <!--tables, controls, etc-->
        </center>
      </center>     
        </div>
      </div>
    </form>
  </div>
  </div>
  </center>
</body>

Here is my CSS:

body
{
    background-color:Black;
}
body.comp
{
    background-color:#F5FCFF;
}
#divBody
{
    margin-left:25px;
}
#divTrans
{
    margin:15px;
}

#container #col1
{
    float: left;
}

#container #col2outer
{
    float: right;
}

#container #footer
{
    text-align:center;
    float: left;
    width: 870px;
}

Here is a ss: enter image description here

score 2 · Accepted Answer · edited May 23 '17 at 11:47

It looks like you simply need to clear your floats.

You can do this by adding overflow: hidden to #container (or perhaps #divBody).

Some further information about clearing floats:

Learning how and when to clear floats is an important part of CSS. You'll save yourself a lot of confusion if you get to grips with it sooner rather than later.

blu · Answer 2 · 2011-05-10T21:59:28.997

Did you try:

#container {
    overflow: auto;
}

For why this solves the problem see:

The CSS Overflow Property

One more popular uses of setting overflow, strangely enough, is float clearing. Setting overflow doesn't clear the float at the element, it self-clears.

From what I recall IE defaults to this behavior on block elements, and FF/Webkit (Chrome/Safari) does not.

All About Floats - gory details, see the section "Techniques for Clearing Floats"

score 0 · Answer 3 · answered May 10 '11 at 21:37

0

I think it's because of your floats. Something you could try is add

<div class="clearFloat"></div>

under your closing tag for the container div.

And then in your css have

div.clearFloat { clear: both; }

answered May 10 '11 at 21:37

bmbaeb

520
1
8
15

Background-color style in FF/chrome

3 Answers3

Linked