I have a problem when I try to wrap a well around several grid elements. I'm not sure if it works like this out of the box or if I'm not sure where to place the well class.
http://jsfiddle.net/AdamFollett/9xS8Y/1/
<div class="container">
<div class="row">
<div class="span6">
<div class="well">
<div class="row">
<div class="span3">
55 Fake Street<br />
St. Johns<br/>
A1E3A2<br/>
</div>
<div class="span3">
more Info<br />
Blah Blah<br/>
Blah<br/>
<input type="button" class="btn btn-primary" value="Use Location" />
</div>
</div>
<div class="row">
<div class="span6">
<img alt="googlemap" class="googlemap" src="https://maps.google.com/maps/api/staticmap?center=43.221805,-79.858946&zoom=14&size=320x240&maptype=roadmap&markers=color:red|43.221805,-79.858946&sensor=false" />
</div>
</div>
</div>
</div>
</div>
</div>
The two span3 elements will not space correctly when the well class is included. Am I not using the class correctly or will I need to add my own CSS to fix this?
Thanks
The problem lies with the DIV with the well class I think because it takes the full length of the row, and then you have 2 span3 DIV inside taking more space than the well they are inside (not sure if I'm clear enough)
However, if you replace your inner row class with row-fluid and set the two inner DIV's classes to span6, it should display as you want:
<div class="row-fluid">
<div class="span6">55 Fake Street
<br />Fake Town
<br/>A1B2C3
<br/>
</div>
<div class="span6">more Info
<br />Blah Blah
<br/>Blah
<br/>
<input type="button" class="btn btn-primary" value="Use Location" />
</div>
</div>
I've forked your fiddle here.