Hi all, am a newbie to css, so please be patient. All am trying to do is simply display a textbox below it's descriptive label. How can i get this done in css? Right now I have the html for my controls as below <div class="label"> <asp:Label ID="lblNumber" runat="server" CssClass="lblStyle01">Number:</asp:Label> </div> <div class="value"> <asp:TextBox ID="TextBox8" runat="server" CssClass="txtStatic"></asp:TextBox> </div> Code (markup): and my current stlyes as .lblStyle01 { font-size: 12px; text-align:right; } .txtStatic { font-size: 12px; background-color: #f4f4f4; border: none; } Code (markup): Thanks
The first thing I would is put the text box in the same div as the label. Also ad a break tag after the label "<br />" <div class="label"> <asp:Label ID="lblNumber" runat="server" CssClass="lblStyle01">Number:</asp:Label> <br /> <asp:TextBox ID="TextBox8" runat="server" CssClass="txtStatic"></asp:TextBox> </div> Code (markup): I didn't test this and no doubt you'll have to adjust you CSS accordingly, but it should work. Also sometimes lineheight and other things can push things further apart than you like. Often these can be corrected with negative margins i.e. "margin-top:-10px;"
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style> .lblStyle01 { font-size: 12px; text-align:right; } .txtStatic { display:block; font-size: 12px; background-color: #f4f4f4; border: none; } </style> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> </head> <body> <div class="label"> <Label ID="lblNumber" class="lblStyle01">Number: <input type="textbox" ID="TextBox8" runat="server" CssClass="txtStatic" class="txtStatic"></input></Label> </div> </body> </html> Code (markup): The trick is display:block
why do you hve to wrap div around label. May be you have reasons. but simply insert break, after label without wrapping div