asp.net - controls wont line with CSS

I am having difficulty getting these controls to line up in there respective columns..
<%@ Page Language="VB" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">

</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
    
<style type="text/css">

div.product_col { float:left;width:30%;border: 1px solid #000;  }
.mylabel 
{
	float: left;

}


div.quanity_col{ float:left;width:30%;border: 1px solid #000; }

.mybutton 
{
	float: left;
	text-align:left 
}

div.UnitPrice_col { float:left;width:10%;border: 1px solid #000; }
.mylabel 
{
	float: left;

	
}


div.Amount_col { float:left;width:10%;border: 1px solid #000; }
.mylabel 
{
	float: left;

	
}


div.Delivery_col { float:left;width:26%;border: 1px solid #000; }
.mylabel 
{
	float: left;

	
}


div.Remove_col { float:left;width:20%;border: 1px solid #000; }

.mybutton 
{
	float: left;
	
}

</style> 
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <br />
        <asp:Label ID="Label1" runat="server" Font-Bold="True" ForeColor="#CC3300"></asp:Label>
        <br />
                
            <br />
        _________________________________________________________________________________________<br />
        								<TD align="center">
									<TABLE id="Table1" width="100%" align="center" borderColor="black" cellSpacing="0" cellPadding="1" border="1" runat="server">
										<tr>
											<td align="center" colSpan="6" style="FONT-WEIGHT:bold;FONT-SIZE:10pt;COLOR:white;FONT-FAMILY:verdana;BACKGROUND-COLOR:#0000FF">Your 
												Cart Content</td>
										</tr>
										<TR style="FONT-WEIGHT:bold;FONT-SIZE:10pt;FONT-FAMILY:verdana">
											<TD width="30%">Product Name:</TD>
											<TD width="30%">Quantity:</TD>
											<TD width="10%">UnitPrice:</TD>
											<TD width="10%">Amount:</TD>
											<TD style="width: 26%">Delivery</TD>
											<TD width="20%">Remove</TD>
										</TR>
									</TABLE>
								</TD>
								
								
								
								
								
							</TR>
							<TR vAlign="top" style="FONT-WEIGHT:bold;FONT-SIZE:10pt;COLOR:white;FONT-FAMILY:verdana;BACKGROUND-COLOR:#0000FF">
								
							</TR>
						</TABLE></td><br />
						
	<div class="product_col">
	        <asp:Label ID="Label2" runat="server" CssClass="mylabel"></asp:Label >
	            <asp:Label ID="Label6" runat="server"  CssClass="mylabel"></asp:Label>
	        <asp:Label ID="Label7" runat="server" CssClass="mylabel"></asp:Label>
	            <asp:Label ID="Label11" runat="server"  CssClass="mylabel"></asp:Label>
	        <asp:Label ID="Label12" runat="server" CssClass="mylabel"></asp:Label>
	            <asp:Label ID="Label16" runat="server"  CssClass="mylabel"></asp:Label>
	        <asp:Label ID="Label17" runat="server" CssClass="mylabel"></asp:Label>
	             <asp:Label ID="Label21" runat="server"  CssClass="mylabel"></asp:Label>
	        <asp:Label ID="Label22" runat="server" CssClass="mylabel"></asp:Label>
	             <asp:Label ID="Label26" runat="server"  CssClass="mylabel"></asp:Label>
	        
	</div>
	
	<div class="quanity_col">
	        <asp:TextBox ID="TextBox1" runat="server" Width="40px"  CssClass="mybutton"></asp:TextBox>
	        <asp:TextBox ID="TextBox2" runat="server" Width="40px" CssClass="mybutton"></asp:TextBox>
	        <asp:TextBox ID="TextBox3" runat="server" Width="40px" CssClass="mybutton"></asp:TextBox>
	        <asp:TextBox ID="TextBox4" runat="server" Width="40px" CssClass="mybutton"></asp:TextBox>
	        <asp:TextBox ID="TextBox5" runat="server" Width="40px" CssClass="mybutton"></asp:TextBox>
	</div>
	
	<div class="UnitPrice_col">
	        <asp:Label ID="Label3" runat="server"  CssClass="mylabel"></asp:Label>
	        <asp:Label ID="Label8" runat="server"  CssClass="mylabel"></asp:Label>
	        <asp:Label ID="Label13" runat="server"  CssClass="mylabel"></asp:Label>
	        <asp:Label ID="Label18" runat="server"  CssClass="mylabel"></asp:Label>
	        <asp:Label ID="Label23" runat="server"  CssClass="mylabel"></asp:Label>
	
	</div>
	
	<div class="Amount_col">
	        <asp:Label ID="Label4" runat="server"  CssClass="mylabel"></asp:Label>
	        <asp:Label ID="Label9" runat="server"  CssClass="mylabel"></asp:Label>
	        <asp:Label ID="Label14" runat="server"  CssClass="mylabel"></asp:Label>
	        <asp:Label ID="Label19" runat="server"  CssClass="mylabel"></asp:Label>
	        <asp:Label ID="Label24" runat="server"  CssClass="mylabel"></asp:Label>
	
	</div>
	
	<div class="Delivery_col">
	        <asp:Label ID="Label5" runat="server"  CssClass="mylabel"></asp:Label>
	        <asp:Label ID="Label10" runat="server"  CssClass="mylabel"></asp:Label>
	        <asp:Label ID="Label15" runat="server"  CssClass="mylabel"></asp:Label>
	        <asp:Label ID="Label20" runat="server"  CssClass="mylabel"></asp:Label>
	        <asp:Label ID="Label25" runat="server"  CssClass="mylabel"></asp:Label>
	
	</div>
	
	<div class="Remove_col">
	        <asp:Button ID="Button3" runat="server" Width="31px" Text="X"  CssClass="mybutton"/>
	        <asp:Button ID="Button4" runat="server" Width="31px" Text="4"  CssClass="mybutton"/>
	        <asp:Button ID="Button5" runat="server" Width="31px" Text="5"  CssClass="mybutton"/>
	        <asp:Button ID="Button6" runat="server" Width="31px" Text="6"   CssClass="mybutton"/>
	        <asp:Button ID="Button7" runat="server" Width="31px" Text="7"  CssClass="mybutton"/>
	
	</div>

	
        
        <br />
        <br />
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <asp:Label ID="Label28" runat="server"></asp:Label>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <asp:Label ID="Label29" runat="server"></asp:Label>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <asp:Label ID="Label30" runat="server"></asp:Label>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <br />
            <br />
            <div>
                <b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <br />
        &nbsp;&nbsp;&nbsp;
        <br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<asp:Button ID="Button10" runat="server" Text="Update" onclick="Button10_Click" 
                    style="height: 26px" />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<asp:Button ID="Button9" 
                    runat="server" Text="Continue Shopping" onclick="Button9_Click" />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;
        <asp:Button ID="Button2" runat="server" onclick="Button2_Click" Text="Check Out" />
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <asp:Button ID="Button8" runat="server" Text="Empty Cart" 
                    onclick="Button8_Click" />
        <br />
        <br />
        </div>
    &nbsp;
    <br />
</b>
    </div>
    </form>
</body>
</html>

Open in new window

LVL 10
GlobaLevelProgrammerAsked:
Who is Participating?
 
sbickerstaffConnect With a Mentor Commented:
firstly, in your css you have:

<style type="text/css">

div.product_col {
  float:left;
  width: 30%;
  border: 1px solid #000;
}
.mylabel 
{
        float: left;

}


div.quanity_col { 
  float:left;
  width:30%;
  border: 1px solid #000; 
}
.mybutton 
{
        float: left;
        text-align:left 
}

div.UnitPrice_col { 
  float:left;
  width:10%;
  border: 1px solid #000; 
}
.mylabel 
{
        float: left;

        
}


div.Amount_col { 
  float:left;
  width:10%;
  border: 1px solid #000; 
}
.mylabel 
{
        float: left;

        
}

div.Delivery_col { 
  float:left;
  width:26%;
  border: 1px solid #000; 
}
.mylabel 
{
        float: left;

        
}


div.Remove_col { 
float:left;
width:20%;
border: 1px solid #000; 
}

.mybutton 
{
        float: left;
        
}
</style>

Open in new window


but for your mylabel and mybutton classes, are you setting them for each container i.e.

div.Remove_col {
float:left;
width:20%;
border: 1px solid #000;
}
.mybutton (which belongs to div.Remove_col) ???
{
        float: left;
}

because for this to happen, your css should be:

<style type="text/css">

div.product_col {
  float:left;
  width: 30%;
  border: 1px solid #000;
}
div.product_col .mylabel 
{
  float: left;
}


div.quanity_col { 
  float:left;
  width:30%;
  border: 1px solid #000; 
}

div.quanity_col .mybutton 
{
  float: left;
  text-align:left 
}

div.UnitPrice_col { 
  float:left;
  width:10%;
  border: 1px solid #000; 
}
div.UnitPrice_col .mylabel 
{
  float: left;
}


div.Amount_col { 
  float:left;
  width:10%;
  border: 1px solid #000; 
}
div.Amount_col .mylabel 
{
  float: left;
}

div.Delivery_col { 
  float:left;
  width:26%;
  border: 1px solid #000; 
}
div.Delivery_col.mylabel 
{
  float: left;      
}


div.Remove_col { 
  float:left;
  width:20%;
  border: 1px solid #000; 
}

div.Remove_col.mybutton 
{
  float: left;       
}

</style>

Open in new window


Next, I'm can't remember how <span> (generated by the <asp:Label>) handles width, so you could try using <asp:Panel> to generate divs which don't mind being resized.  However, after these, you will need to perform a clear: left; (see below)


<div class="product_col">
  <asp:Panel ID="Label2" runat="server" CssClass="mylabel"></asp:Panel>
  <asp:Panel ID="Label6" runat="server"  CssClass="mylabel"></asp:Panel>
  <asp:Panel ID="Label7" runat="server" CssClass="mylabel"></asp:Panel>
  <asp:Panel ID="Label11" runat="server"  CssClass="mylabel"></asp:Panel>
  <asp:Panel ID="Label12" runat="server" CssClass="mylabel"></asp:Panel>
  <asp:Panel ID="Label16" runat="server"  CssClass="mylabel"></asp:Panel>
  <asp:Panel ID="Label17" runat="server" CssClass="mylabel"></asp:Panel>
  <asp:Panel ID="Label21" runat="server"  CssClass="mylabel"></asp:Panel>
  <asp:Panel ID="Label22" runat="server" CssClass="mylabel"></asp:Panel>
  <asp:Panel ID="Label26" runat="server"  CssClass="mylabel"></asp:Panel>
</div>
<div style="clear: left;"></div>
<div class="quanity_col">
  <asp:TextBox ID="TextBox1" runat="server" Width="40px"  CssClass="mybutton"></asp:TextBox>
  <asp:TextBox ID="TextBox2" runat="server" Width="40px" CssClass="mybutton"></asp:TextBox>
  <asp:TextBox ID="TextBox3" runat="server" Width="40px" CssClass="mybutton"></asp:TextBox>
  <asp:TextBox ID="TextBox4" runat="server" Width="40px" CssClass="mybutton"></asp:TextBox>
  <asp:TextBox ID="TextBox5" runat="server" Width="40px" CssClass="mybutton"></asp:TextBox>
</div>
<div style="clear: left;"></div>
<div class="UnitPrice_col">
  <asp:Panel ID="Label3" runat="server"  CssClass="mylabel"></asp:Panel>
  <asp:Panel ID="Label8" runat="server"  CssClass="mylabel"></asp:Panel>
  <asp:Panel ID="Label13" runat="server"  CssClass="mylabel"></asp:Panel>
  <asp:Panel ID="Label18" runat="server"  CssClass="mylabel"></asp:Panel>
  <asp:Panel ID="Label23" runat="server"  CssClass="mylabel"></asp:Panel>
</div>
<div style="clear: left;"></div>
<div class="Amount_col">
  <asp:Panel ID="Label4" runat="server"  CssClass="mylabel"></asp:Panel>
  <asp:Panel ID="Label9" runat="server"  CssClass="mylabel"></asp:Panel>
  <asp:Panel ID="Label14" runat="server"  CssClass="mylabel"></asp:Panel>
  <asp:Panel ID="Label19" runat="server"  CssClass="mylabel"></asp:Panel>
  <asp:Panel ID="Label24" runat="server"  CssClass="mylabel"></asp:Panel>
</div>
<div style="clear: left;"></div>
<div class="Delivery_col">
  <asp:Panel ID="Label5" runat="server"  CssClass="mylabel"></asp:Panel>
  <asp:Panel ID="Label10" runat="server"  CssClass="mylabel"></asp:Panel>
  <asp:Panel ID="Label15" runat="server"  CssClass="mylabel"></asp:Panel>
  <asp:Panel ID="Label20" runat="server"  CssClass="mylabel"></asp:Panel>
  <asp:Panel ID="Label25" runat="server"  CssClass="mylabel"></asp:Panel>
</div>
<div style="clear: left;"></div>
<div class="Remove_col">
  <asp:Button ID="Button3" runat="server" Width="31px" Text="X"  CssClass="mybutton"/>
  <asp:Button ID="Button4" runat="server" Width="31px" Text="4"  CssClass="mybutton"/>
  <asp:Button ID="Button5" runat="server" Width="31px" Text="5"  CssClass="mybutton"/>
  <asp:Button ID="Button6" runat="server" Width="31px" Text="6"   CssClass="mybutton"/>
  <asp:Button ID="Button7" runat="server" Width="31px" Text="7"  CssClass="mybutton"/>
</div>

Open in new window


this is just what I would do.  But give this a go and let me know how you get on.
0
 
GlobaLevelProgrammerAuthor Commented:
text align wasnt working either...
0
 
sbickerstaffCommented:
Are the IDs of the elements changing when you view the source of the webpage, as is the default behaviour of ASP.NET? Which means that for any asp:control, you can't assign css easily.

If so (and provided you're using ASP.NET 4.0, this can be stopped so that any name you give it, it'll retain that ID.

Add the following to your web.config file

<system.web>
    <pages clientIDMode="Static" />
</system.web>

Open in new window

0
Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

 
GlobaLevelProgrammerAuthor Commented:
the issue i am having ...is that the controls in each <div>...wont line up to th eleft vertically..but run to the right..till it hits the end of the DIV..then goes to the next line and repeats...
0
 
GlobaLevelProgrammerAuthor Commented:
that you very good...
0
 
GlobaLevelProgrammerAuthor Commented:
thank you very good...
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.