I'm using the Twitter Bootstrap framework trying to get a layout like this:
This is how it looks now:
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 {
}