Re: multiple columns inside well? 2.0

[Sam Sherlock]

the well class has padding 19px all round so you can't have two span6's
inside a well which fills a span12

I have got this to work (only tested in firefox) - I put it in the fluid
example but it might not play too well with responsive layout

<div class="row-fluid">
            <div class="span12">
<form>
<div class="well clearfix">
<div class="span5">


          <legend>Controls Bootstrap supports</legend>
          <div class="control-group">
            <label for="input01" class="control-label">Text input</label>
            <div class="controls">
              <input type="text" id="input01" class="input-xlarge">
              <p class="help-block">In addition to freeform text, any HTML5
text-based input appears like so.</p>
            </div>
          </div>
          <div class="control-group">
            <label for="optionsCheckbox"
class="control-label">Checkbox</label>
            <div class="controls">
              <label class="checkbox">
                <input type="checkbox" value="option1" id="optionsCheckbox">
                Option one is this and that&mdash;be sure to include why
it's great
              </label>
            </div>
          </div>
          <div class="control-group">
            <label for="select01" class="control-label">Select list</label>
            <div class="controls">
              <select id="select01">
                <option>something</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
              </select>
            </div>
          </div>
          <div class="control-group">
            <label for="multiSelect"
class="control-label">Multicon-select</label>
            <div class="controls">
              <select id="multiSelect" multiple="multiple">
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
              </select>
            </div>
          </div>
          <div class="control-group">
            <label for="fileInput" class="control-label">File input</label>
            <div class="controls">
              <input type="file" id="fileInput" class="input-file">
            </div>
          </div>
          <div class="control-group">
            <label for="textarea" class="control-label">Textarea</label>
            <div class="controls">
              <textarea rows="3" id="textarea"
class="input-xlarge"></textarea>
            </div>
          </div>
          <div class="form-actions">
            <button class="btn btn-primary" type="submit">Save
changes</button>
            <button class="btn" type="reset">Cancel</button>
          </div>


 </div>
<div class="span5 offset1">

          <legend>Controls Bootstrap supports</legend>
          <div class="control-group">
            <label for="input01" class="control-label">Text input</label>
            <div class="controls">
              <input type="text" id="input01" class="input-xlarge">
              <p class="help-block">In addition to freeform text, any HTML5
text-based input appears like so.</p>
            </div>
          </div>
          <div class="control-group">
            <label for="optionsCheckbox"
class="control-label">Checkbox</label>
            <div class="controls">
              <label class="checkbox">
                <input type="checkbox" value="option1" id="optionsCheckbox">
                Option one is this and that&mdash;be sure to include why
it's great
              </label>
            </div>
          </div>
          <div class="control-group">
            <label for="select01" class="control-label">Select list</label>
            <div class="controls">
              <select id="select01">
                <option>something</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
              </select>
            </div>
          </div>
          <div class="control-group">
            <label for="multiSelect"
class="control-label">Multicon-select</label>
            <div class="controls">
              <select id="multiSelect" multiple="multiple">
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
              </select>
            </div>
          </div>
          <div class="control-group">
            <label for="fileInput" class="control-label">File input</label>
            <div class="controls">
              <input type="file" id="fileInput" class="input-file">
            </div>
          </div>
          <div class="control-group">
            <label for="textarea" class="control-label">Textarea</label>
            <div class="controls">
              <textarea rows="3" id="textarea"
class="input-xlarge"></textarea>
            </div>
          </div>
          <div class="form-actions">
            <button class="btn btn-primary" type="submit">Save
changes</button>
            <button class="btn" type="reset">Cancel</button>
          </div>

</div>

<style type="text/css">
.clearfix {
    *zoom: 1;
}

.clearfix:after {
    clear: both;
    content: "";
    display: table;
}
</style>
            </div></form></div><!--/span-->
            <!--/span-->
            <!--/span-->
          </div>

 - S




On 9 February 2012 17:10, Gary Taylor <rufhau...@gmail.com> wrote:

> <form>
> <div class="well">
> <div class="span4">
> [form elements]
> </div>
> <div class="span4">
> [more form elements]
> </div>
> </div<!-- /well -->
> </form>
>