Question

I am trying to create a table look utilizing CSS Divs, and Im having a problem inserting a transparent image between Label Controls, in order to give these Labels a decent amount of vertical space between them. I want to accomplish the same for the TextBox Controls.

The problem is that this Image appears before all of the Label Controls when they should appear between each of the Label controls

I had already tried using: <br style="clear:both; line-height:50px;" />

between each of the Labels which also did not work.

I would appreciate any solution or an alternative.

<div id="contact">
    <div id="LeftLabelColumn">
        <asp:Label ID="Label1" runat="server" class="emaillable" Text="Name:"></asp:Label>
        <div class="linespace"></div>
        <asp:Label ID="Label2" runat="server" class="emaillable" Text="Company:"></asp:Label>
        <div class="linespace"></div>
    </div>    
    <div id="RightControlColumn">
        <asp:TextBox ID="TextBox1" runat="server" class="contacttextbox"></asp:TextBox>
        <asp:TextBox ID="TextBox2" runat="server" class="contacttextbox"></asp:TextBox>
    </div>
</div>

#contact {
    height:318px;
    width:848px;
    margin:6px 0 0 17px;
    position:relative;
    overflow:hidden; 
    /*background-color:green;*/
}
#LeftLabelColumn {
    height:318px;
    width:100px;
    float:left;
    position:relative;
    background-color:orange;   
}
#RightControlColumn {
    height:318px;
    width:276px;
    float:left;
    position:relative;
    background-color:red;
}
.emaillabel {
    height:120px;
    display: block;
    margin-bottom:125px;
} 
.linespace {
    height: 650px;
    float:left;
    position:relative;
    display: block;    
}

Answer 1

   <div id="contact">
    <div id="LeftLabelColumn" class="emaillabel">
        <asp:Label ID="Label1" runat="server" CssClass="emaillable" Text="Name:"></asp:Label>
        <div class="linespace"></div>
        <br style="clear:both; line-height:0px;" />
        <asp:Label ID="Label2" runat="server" CssClass="emaillable" Text="Company:"></asp:Label>
        <div class="linespace"></div>
        <br style="clear:both; line-height:0px;" />
        <asp:Label ID="Label3" runat="server" CssClass="emaillable" Text="Email:"></asp:Label>
        <div class="linespace"></div>
        <br style="clear:both; line-height:0px;" />
        <asp:Label ID="Label4" runat="server" CssClass="emaillable" Text="Phone:"></asp:Label>
        <div class="linespace"></div>
        <br style="clear:both; line-height:0px;" />
    </div> 
    <div id="MidLabelColumn">&nbsp;</div>
    <div id="RightControlColumn">
        <asp:TextBox ID="TextBox1" runat="server" class="contacttextbox" Width="224px" TabIndex="1"></asp:TextBox>
        <div class="linespace"></div>
        <br style="clear:both; line-height:0px;" />            
        <asp:TextBox ID="TextBox2" runat="server" class="contacttextbox" Width="224px" TabIndex="2"></asp:TextBox>
        <div class="linespace"></div>
        <br style="clear:both; line-height:0px;" />            
        <asp:TextBox ID="TextBox3" runat="server" class="contacttextbox" Width="224px" TabIndex="3"></asp:TextBox>
        <div class="linespace"></div>
        <br style="clear:both; line-height:0px;" />
    </div>           
</div>

#contact {
    height:318px;
    width:848px;
    margin:6px 0 0 17px;
    position:relative;
    overflow:hidden; 
    /*background-color:green;*/
}
#LeftLabelColumn {
    height:318px;
    width:80px;
    float:left;
    position:relative;
    background-color:orange;   
}
#MidLabelColumn {
    height:318px;
    width:5px;
    float:left;
    position:relative;
    background-color:blue;   
}
#RightControlColumn {
    height:318px;
    width:276px;
    float:left;
    position:relative;
    background-color:red;
}
.emaillabel {
    display: block;
    float:right;
    text-align:right;
    font-family:Arial;
    font-size:14px;
    /*height: 200px;*/
    /*margin-bottom: 50px;*/
} 
.linespace {
    height: 25px;
    float:left;
    position:relative;
    display: block;
}