Div css not getting applied to layout. Why am I doing wrong? - css

Question

I'm currently changing from table based layouts to use div layout instead. I'm struggling with the css. My styles just don't seem to be getting applied even though the css file is loading. What am I doing wrong?
.CategoryHeader
{
font-family: Verdana;
font-size: 10pt;
color: #2151b1;
text-align: left;
padding-bottom:3px;
padding-top:3px;
}
.CriteriaHeader {
font-family: Verdana;
font-size: 10pt;
text-align: left;
padding-bottom:3px;
padding-top:3px;
}
.divTable {
display: table;
border: none;
width:100%;
}
.divTR {
display: table-row;
width: 100%;
}
.divTD {
display: table-cell;
margin-bottom:22px;
}
<div class="divTable">
<div class="divTR">
<div class="divTD">
<LABEL class="CriteriaHeader">Number</LABEL>
</div>
</div>
<div class="divTR">
<div class="divTD">
<asp:TextBox id="txtNumber" runat="server" CssClass="Textbox" ToolTip="Enter Number to search"></asp:TextBox>
</div>
</div>
<div class="divTR">
<div class="divTD">
<LABEL class="CriteriaHeader">Description</LABEL>
</div>
</div>
<div class="divTR">
<ajaxToolkit:ListSearchExtender ID="cboDesc_ListSearchExtender" runat="server"
Enabled="True" TargetControlID="cboDesc" PromptCssClass="ListSearch">
</ajaxToolkit:ListSearchExtender>
<div class="divTD">
<asp:DropDownList id="cboDesc" runat="server" CssClass="DropDownList" ToolTip="Choose description to search"></asp:DropDownList>
</div>
</div>
</div>
<div>
<asp:Button id="btnSearch" runat="server" Text="Submit" CssClass="Button"></asp:Button>
<asp:Button id="btnClear" runat="server" Text="Clear" CssClass="Button"></asp:Button>
</div>

Answer 1

Instead of using so many table property, you can use position:relative/absolute/fixed, display:inline/inline-block. They are absolutely compatible with IE6+ and non-IE browsers. Like table、table-row、table-cell，they are not absolutely for IE browser.