CODEWITHSUNDEEP
htmlcssbackground
Daniel Anderson
Daniel Anderson

Reputation: 275

DIV background doesn't properly fill with CSS color

I am trying to do something simple, and it's tripping me up. I have a bit of HTML that looks like this:

    <div id="div_table">
    <div class="div_table_row">
        <div class="div_row_label">
            Your Name :
        </div>
        <div class="div_row_field">
            <asp:TextBox 
                ID="tbCustomerName" 
                Width="95%" 
                MaxLength="80" 
                runat="server"></asp:TextBox>
            <asp:RequiredFieldValidator 
                ID="rqCustomerName" 
                runat="server" 
                ControlToValidate="tbCustomerName"
                ErrorMessage="Required" 
                SetFocusOnError="true" 
                CssClass="ctl_err" 
                Text="Required"></asp:RequiredFieldValidator>
        </div>
    </div>
    <div class="div_table_row">
            <div class="div_row_label">
                Your Company :
            </div>
            <div class="div_row_field">
                <asp:TextBox
                    ID="tbCompany"
                    Width="95%"
                    MaxLength="80"
                    runat="server"></asp:TextBox>
                <asp:RequiredFieldValidator
                    ID="rqCompany"
                    runat="server"
                    ControlToValidate="tbCompany"
                    ErrorMessage="Required"
                    SetFocusOnError="true"
                    CssClass="ctl_err"
                    Text="Required"></asp:RequiredFieldValidator>
            </div>
        </div>
    </div>

and it uses a style sheet with the following code for the elements in the HTML:

    #div_table{
        overflow:hidden;
        width:60%;
        margin-left:auto;
        margin-right:auto;
        padding-left:5px;
        padding-right:5px;
        clear:both;
    }

    .div_table_row{
        width:100%;
        clear:both;
    }

    .div_row_label{
        width:50%;
        text-align:right;
        background-color:#cccccc;
        float:left;
        height:100%;
    }

    .div_row_field{
        width:50%;
        text-align:left;
        background-color:#000000;
        float:right;
        height:100%;
    }

So, the problem is that when I browse to the page, the gray background color of the div div_row_label only appears underneath the text rather than filling the entire div, although in the div div_row_field, it displays a black background just fine. This is in both Chrome and Edge. What am I doing wrong?

Upvotes: 0

Views: 56

Answers (2)

Johannes
Johannes

Reputation: 67738

.div_row_label is floated, so it has no "official" height. To work around that, add overflow:auto;to it's container, like:

.div_table_row {
  overflow:auto;
}

Upvotes: 1

Taytorious
Taytorious

Reputation: 324

One potential workaround is to set the background color of .div_table_row instead of .div_row_label. Since the background color of .div_row_field is being set, this should still give you the outcome you're looking for.

Upvotes: 0

Related Questions