Twitter Bootstrap CSS static-fluid form positioning

Question

I'm using the Twitter Bootstrap framework trying to get a layout like this:

This is how it looks now:

jsFiddle fullscreen

jsFiddle

The width of the form container changes based on the width of the browser (Twitter Bootstrap's CSS media-queries). The icon-boxes always have 14px of width.

I've tried different things based on static-width-sidebar/fluid-content CSS layouts to try to make the text input width fill out.

I think my only option is making my own CSS media-queries that define an absolute width for the text input.

<div class="container">
    <div class="row">
        <section class="span9">
            <h2>Our Theme</h2>
            <p>lorem ipsum...</p>
        </section>
        <div class="span3">
            <section class="patch-well">
                <h2>Contact Us</h2>
                <p>Send a message......lorem ipsum...</p>
                <form>
                    <fieldset class="control-group">                        
                        <div class="input-prepend">
                            <span class="add-on">
                                <i class="icon-user"></i>
                            </span><input type="text">
                        </div>
                        <div class="input-prepend">
                            <span class="add-on">
                                <i class="icon-envelope"></i>
                            </span><input type="text">
                        </div>
                        <textarea></textarea>
                        <button type="submit" class="btn btn-default">Send message</button>
                    </fieldset>
                </form>
            </section>
        </div>
    </div><!-- row -->
</div>

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css');

body { padding: 10px }

.patch-well {
  color: #FFF;
  background: url('http://subtlepatterns.com/patterns/darkdenim3.png') repeat;
  padding: 20px;
  text-align: center;

  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;

  -moz-box-shadow: 0 0 5px #000;
  -webkit-box-shadow: 0 0 5px #000;
  box-shadow: 0 0 5px #000;
}

.input-prepend {

}

.input-prepend .add-on {

}

.input-prepend input {

}

Answer 1

You put whole form into span3, it's about 25% of row width. Therefore, if resolution is big, span3 is not enough to contain whole form. On smaller resolutions, width of span3 becomes 100%, and on small resolutions looking good. Just use some other span class, and carefuly carefully calculate numbers in span classes. Like here Also, i prefer to use row-fluid class instead of row class, it's easier to manipulate with width.

Always use structure like this

<div class="row-fluid">
  <div class"span3">
     <!-- content1 -->
  </div>
  <div class"span9">
     <div class="row-fluid">
        <div class="span6">
           <!-- content2 -->
        </div
        <div class="span6">
           <!-- content3 -->
        </div
     </div>
  </div>
</div>

Note that always if i want new line in design without floating, and if i want 100% of width od parent element, i will use row-fluid. Because children elements can be again span elements the sum of the 12. In this example, "content1" will use 25% of width in big resolutions but in small resolutions it will have 100% width. In big resolutions, "content2" and "content3" will have 100% of parents width, but that is 75% of container width. In small resolutions, all span classes will have 100% width. If you don't want that in some cases, just override default bootstrap css with yours classes.

I hope you are understand what is my point. Sorry for my english :)