I've got a standard bootstrap layout set up.
<div classs="row-fluid">
<div class="span12" style="background:black; padding:25px 0px;">content content</div>
</div>
<div class="span4 offset2">
<p>blah blah blah this is a test blah blah blah this is a testblah blah blah this is a test <br />
blah blah blah this is a testblah blah blah this is a testblah blah blah this is a test</p>
</div>
<div class="span12" style="blue; padding:25px 0px;">content content</div>
When I resize the window, the <p> element shrinks in width but expands in height, causing it to become thinner and longer. This also pushes all content below, like the span12, further down the page. I'd like the <p> element to remain the same length or perhaps become smaller as I resize the window. I've tried removing margin and padding, but then it still extends below the bottom span12, creating a margin at the bottom of the page. Can someone help me figure out what's causing this?
UPDATE:
Here is the link to my fiddle: http://jsfiddle.net/Lucaz5520/ZTgGX/. If you check the paragraph element while resizing the window, you'll see it getting thinner and pushing all content below it down.