asp textbox required field validator message positioning - html

Question

I have used a asp:RequiredFieldValidator to validate a textbox. It works fine. But i need to change the position of the error message.
<div class="form-group">
<label for="txtGarageName" class="col-sm-2 control-label">Garage Name</label>
<asp:TextBox runat="server" placeholder="Garage Name" CssClass="form-control" Width="50%" ID="txtGarageName"></asp:TextBox>
<asp:RequiredFieldValidator id="RequiredFieldValidator1" runat="server"
ControlToValidate="txtGarageName"
ErrorMessage="Garage name is a required field."
ForeColor="Red">
</asp:RequiredFieldValidator>
</div>
When i use this error message display starting from directly under the label.
What i need to do is get the error message to display either in front of the text box or align it with the TextBox start point which means to alighn it more to right. I have tried using a css code as well as putting
margin-left=""
which i saw as solutions in the internet. Neither worked properly.

Answer 1

Using the col-md-6 or span6 CSS class for your TextBoxes will work for you
<asp:TextBox runat="server" placeholder="Garage Name" CssClass="form-control span6" ID="txtGarageName"></asp:TextBox>
<asp:RequiredFieldValidator id="RequiredFieldValidator1" runat="server"
ControlToValidate="txtGarageName"
ErrorMessage="Garage name is a required field."
ForeColor="Red">
</asp:RequiredFieldValidator>

Answer 2

Use the grid system
http://getbootstrap.com/css/#grid-example-basic
If you prefer a simple (non bootstrap) solution you should still use some placeholders for better formatting. An example that i found (not mine)
http://jsfiddle.net/dqC8t/1/
#wrapper {
width: 500px;
border: 1px solid black;
overflow: auto;
}
#first {
float: left;
width: 300px;
border: 1px solid red;
}
#second {
border: 1px solid green;
margin: 0 0 0 302px;
}