• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 208
  • Last Modified:

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

0
GlobaLevel
Asked:
GlobaLevel
  • 4
  • 2
1 Solution
 
GlobaLevelAuthor 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
 
GlobaLevelAuthor 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
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
sbickerstaffCommented:
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
 
GlobaLevelAuthor Commented:
that you very good...
0
 
GlobaLevelAuthor Commented:
thank you very good...
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 4
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now