Asp.net - CSS - get controls to align to the left in DIV tag

I have CSS mapping out my columns..but the controls need to align to the left...
div.Delivery_col { float:left;width:26%;border: 1px solid #000; }
.mylabel
{
      
      
}
.mybutton
{
      
      
}

      <div class="Delivery_col">
              <asp:Label ID="Label5" runat="server"></asp:Label>
              <asp:Label ID="Label10" runat="server"></asp:Label>
              <asp:Label ID="Label15" runat="server"></asp:Label>
              <asp:Label ID="Label20" runat="server"></asp:Label>
              <asp:Label ID="Label25" runat="server"></asp:Label>
      
      </div>
LVL 10
GlobaLevelProgrammerAsked:
Who is Participating?
 
jkofteCommented:
use text-align:left

div.Delivery_col { float:left;width:26%;border: 1px solid #000; text-align:left }
0
 
mreuringCommented:
Not sure about the rest of the JS/CSS developers, but I for one don't know what the hell <asp:Label ID="Label5" runat="server"></asp:Label> is supposed to render...

Considering the open ended CSS statements it would seem a 'label' and a 'button'? My suggestion would be to rewrite the block using a list/list-items, as that seems to be what your doing semantically, rendering a list of 'items'. While being more correct (in my opinion) it would also make it slightly more convenient to work with.

Of course there's a good chance I don't understand what you actually want :)
ul.Delivery_col { float:left;width:26%;border: 1px solid #000; list-style:none; margin: 0; padding:0; }

Open in new window

<ul class="Delivery_col">
   <li><asp:Label ID="Label5" runat="server"></asp:Label></li>
   <li><asp:Label ID="Label10" runat="server"></asp:Label></li>
   <li><asp:Label ID="Label15" runat="server"></asp:Label></li>
   <li><asp:Label ID="Label20" runat="server"></asp:Label></li>
   <li><asp:Label ID="Label25" runat="server"></asp:Label></li>
</ul>

Open in new window

0
 
GlobaLevelProgrammerAuthor Commented:
mreuring..kinda worked...but for textboxes..your idea wont work..as it stacks them diagonally..
      <div class="quanity_col">
               <asp:TextBox ID="TextBox1" runat="server" Width="40px"  CssClass="mybutton"></asp:TextBox><br />
               <asp:TextBox ID="TextBox2" runat="server" Width="40px" CssClass="mybutton"></asp:TextBox><br />
              <asp:TextBox ID="TextBox3" runat="server" Width="40px" CssClass="mybutton"></asp:TextBox><br />
              <asp:TextBox ID="TextBox4" runat="server" Width="40px" CssClass="mybutton"></asp:TextBox><br />
              <asp:TextBox ID="TextBox5" runat="server" Width="40px" CssClass="mybutton"></asp:TextBox><br />
      </div>
0
 
mreuringCommented:
Again, not a clue what the resulting html looks like, I can only guess why what I proposed doesn't work.

What I proposed is straight-forward. You're displaying a list of 'stuff' (I don't care much about what stuff ;)). So you stick the 'stuff' inside a <li>, and since those aren't allowed to live on their own, you stick the <li> elements in a <ul>. Then you want to put the list of 'stuff' to the left, so you float the <ul> to the left. Case closed.

Diagonal stacking can only occur if some of the 'stuff' is not floating (creating a full-width block) and some of it is (creating a partial block). The quick and dirty way to solve that (following the earlier posted html I proposed) is to 'clear' the floated content:
 
ul.Delivery_col li { clear:left }

Open in new window


I could be wrong, there's always that change, but I know my HTML/CSS pretty damn well, I just don't know much about .Net
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.