How do you left align a div?

Question

I Have tried to left align a div by using:

<div class="col-md-3 float-left">

and

<div class="col-md-3" style="text-align: left;">

nothing I try is working?

I tried the float now and the !important and still not working, so here is more of my code:

<div class="form-horizontal">
        <h4>Branch</h4>
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        <div class="form-group col-md-12">
            <div class="col-md-2">
                @Html.LabelFor(model => model.BranchName, htmlAttributes: new { @class = "control-label" })
            </div>
            <div class="col-md-3">
                @Html.EditorFor(model => model.BranchName, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.BranchName, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group col-md-12">
            <div class="col-md-2">
                @Html.LabelFor(model => model.Active, htmlAttributes: new { @class = "control-label" })
            </div>
            <div class="col-md-3" style="float: left !important;">
                @Html.EditorFor(model => model.Active)
                @Html.ValidationMessageFor(model => model.Active, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            <div class=" col-md-offset-1 col-md-2">
                <input type="submit" value="Create" class="btn btn-default" />
            </div>
        </div>
    </div>

And here is a pic to see what I mean. It looks terrible with the checkbox and the textbox so far from their labels.

Answer 1

Can't tell you much without more code or a more specific description of the problem. Regardless of that, my assumption is that you need the contents of a div left aligned? By the class names you are using, I assume you are using Bootstrap. In that case, try adding this class to your div:

text-left

If that doesn't work, try this:

style="text-align: left !important;"

If the second one works, you have CSS that is written somewhere else that is predominate, try to find this CSS and remove/change it. If you are confused about this, read up on CSS Specificity . Do not leave the !important attached for no reason; in general this is considered bad practice.

reference: http://getbootstrap.com/css/#type-alignment

Answer 2

You want to allign a div, and not a text. So you can use:

<div class="col-md-3" style="float:left">

Answer 3

For left align of a div

<div style="float: left;"></div>

for left align of a text

<p style="text-align:left;"></p>

Answer 4

Try

<div class="col-md-1">

instead of

<div class="col-md-2">

on your Label Div's The gap should come from the size of the col-md-2. If you choose col-md-1 the gap should be smaller.