ToyotaMR2 ToyotaMR2 - 6 months ago 16
CSS Question

Button broken when using float left?

I have two forms that need to be side by side. I can get them to float left but the button gets disabled when I use float left. I have tried display-inline and that doesnt work. I have tried span and that doesnt work. No idea why the button stops woeking. Here is a sample form

<div style="float:left;border:1px solid blue; width:200px;">

<div class="bootstrap-iso">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-12">
<form method="post">
<div class="form-group ">
<label class="control-label " for="name">
Name
</label>
<input class="form-control" id="name" name="name" type="text"/>
</div>
<div class="form-group">
<div>
<button class="btn btn-primary " name="submit" type="submit">
Submit
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>

</div>
<div style="display:incline;border:1px solid blue; width:200px;">

<div class="bootstrap-iso">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-12">
<form method="post">
<div class="form-group ">
<label class="control-label " for="name">
LastName
</label>
<input class="form-control" id="name" name="name" type="text"/>
</div>
<div class="form-group">
<div>
<button class="btn btn-primary " name="submit" type="submit">
Submit
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>

</div>

Answer

Will this work as a start?

I changed this (which had a type, should be inline) style="display:incline;... to style="float:left;...

<div  style="float:left;border:1px solid blue; width:200px;">   

  <div class="bootstrap-iso">
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-6 col-sm-6 col-xs-12">
          <form method="post">
            <div class="form-group ">
              <label class="control-label " for="name">
                Name
              </label>
              <input class="form-control" id="name" name="name" type="text"/>
            </div>
            <div class="form-group">
              <div>
                <button class="btn btn-primary " name="submit" type="submit">
                  Submit
                </button>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>

</div>
<div  style="float:left;border:1px solid blue; width:200px;">  

  <div class="bootstrap-iso">
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-6 col-sm-6 col-xs-12">
          <form method="post">
            <div class="form-group ">
              <label class="control-label " for="name">
                LastName
              </label>
              <input class="form-control" id="name" name="name" type="text"/>
            </div>
            <div class="form-group">
              <div>
                <button class="btn btn-primary " name="submit" type="submit">
                  Submit
                </button>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>

</div>

but may I suggest to use style="display: inline-block;... on both your form containers, here using CSS styles (preferable) instead of inline style.

.formwrapper {
  display:inline-block;
  border:1px solid blue;
  width:200px;
}
<div class="formwrapper">   

  <div class="bootstrap-iso">
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-6 col-sm-6 col-xs-12">
          <form method="post">
            <div class="form-group ">
              <label class="control-label " for="name">
                Name
              </label>
              <input class="form-control" id="name" name="name" type="text"/>
            </div>
            <div class="form-group">
              <div>
                <button class="btn btn-primary " name="submit" type="submit">
                  Submit
                </button>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>

</div>
<div class="formwrapper">  

  <div class="bootstrap-iso">
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-6 col-sm-6 col-xs-12">
          <form method="post">
            <div class="form-group ">
              <label class="control-label " for="name">
                LastName
              </label>
              <input class="form-control" id="name" name="name" type="text"/>
            </div>
            <div class="form-group">
              <div>
                <button class="btn btn-primary " name="submit" type="submit">
                  Submit
                </button>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>

</div>