How to set column height equal to longest column in Bulma (flexbox)? - css

I'm using Bulma 0.4.0, though the answer may not be associated with Bulma itself.
How can I set column height equal to others? (see screenshots below)
Edit: codepen with more text that presents actual behavior: https://codepen.io/anon/pen/vmKVbx
Expected behavior:
Actual behavior:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.0/css/bulma.css" />
<div class="columns">
<div class="column">
<p class="notification is-info">First column</p>
</div>
<div class="column">
<p class="notification is-success">Second column</p>
</div>
<div class="column">
<p class="notification is-warning">Third column</p>
</div>
<div class="column">
<p class="notification is-danger">Fourth</p>
</div>
</div>


Here is a simple solution, by adding this CSS rule, and make sure it load after the Bulma CSS
.column {
display: flex;
}
Updated codepen
Stack snippet
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.0/css/bulma.css" />
<style>
.column {
display: flex;
}
</style>
</head>
<body>
<div class="columns">
<div class="column">
<p class="notification is-info">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eu consectetur lorem, nec facilisis dolor. Morbi rhoncus, mi sit amet ornare tincidunt, augue sem aliquet mauris, non pretium orci nisl at est. Curabitur placerat pharetra augue. Etiam non eros nulla. Praesent aliquet sem dui, id varius enim convallis vel. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec convallis mauris felis, sit amet consectetur augue sollicitudin id.</p>
</div>
<div class="column">
<p class="notification is-success">Nulla a mauris vel erat elementum scelerisque. Cras mollis consequat neque, vitae sagittis nisl dapibus porttitor. Donec et rutrum ligula. Donec luctus iaculis orci, nec imperdiet felis semper quis. Nulla a convallis eros, facilisis hendrerit risus. Nulla sit amet porta quam. Nullam maximus tempus sem, dapibus dapibus purus sollicitudin vel. Phasellus at rhoncus odio. Quisque sit amet ornare dolor. Maecenas accumsan viverra tristique. Etiam vulputate nibh ipsum, at rutrum lacus hendrerit ut. Nunc sodales diam purus, in ultricies nulla consectetur sit amet. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus ut tincidunt mauris.</p>
</div>
<div class="column">
<p class="notification is-warning">Pellentesque eros tortor, pharetra in lorem quis, maximus hendrerit ex. Praesent nunc ante, elementum at congue ut, ultricies quis lectus. Aenean vel elementum risus. Vestibulum aliquet justo in ligula dictum commodo. Nullam condimentum ante vitae nulla dignissim, vitae interdum neque dapibus. Aenean nec quam egestas, viverra ex vel, tempus lectus. Quisque eu euismod neque. Mauris aliquam neque a porta condimentum. Cras eget nisi turpis. Aenean lacus velit, dapibus eu aliquam eget, aliquet id quam. Integer ultricies est quis erat facilisis congue vel efficitur ipsum. Nunc id varius orci, consequat vehicula libero. Morbi maximus, orci in efficitur feugiat, quam lacus lobortis elit, in blandit mauris dolor sit amet mauris.
</p>
</div>
<div class="column">
<p class="notification is-danger">Morbi turpis nunc, porttitor ut bibendum et, tincidunt vel nisi. Ut magna massa, placerat id nunc at, venenatis sodales leo. Nunc dapibus, lacus ac molestie vestibulum, tortor mauris posuere turpis, at pretium orci orci in justo.</p>
</div>
</div>
</body>
</html>
In Bulma, you have got the class .is-flex to achieve the same.


I know it's a bit late, but maybe someone who looks for similar solution will find my answer helpful.
You can use Bulma's Tile system to get something that will behave like equal height columns.
<div class="tile is-ancestor">
<div class="tile is-horizontal">
<div class="tile is-parent">
<div class="tile is-child">
<!--Content here-->
</div>
</div>
<div class="tile is-parent">
<div class="tile is-child box">
<!--Content here-->
</div>
</div>
</div>
</div>
No additional css needed. You can also specify horizontal size of columns using is-1 - is-12 classes.
Check this pen to see this in action


This did the trick for me.
<div class="column">
<section class="section1">
...
</section>
</div>
.section1 {
height: 100%;
}


This works fine for me with this code:
<div class="columns">
<div class="column my-class">
one thing
</div>
<div class="column my-class">
many other <br><br><br> etc. things
</div>
</div>
<style>
.column.my-class {
display: inline-flex;
}
.column.my-class > div {
width: 100%; // only Edge needed this nonsense
}
</style>
Worked in Chrome 61.0.3163.100 (of course), Edge 40.15063.674.0, Firefox 57.0.


align-items: stretch http://cssreference.io/flexbox/
.columns {
flex-wrap: wrap;
align-items: stretch;
}
Ref: https://github.com/jgthms/bulma/issues/696


I noticed that making .column as flex broke the layout.
I solved with the following CSS rule, this way I can use the class .is-equal-height if I want aligned columns.
.columns.is-equal-height > .column > * {
height: 100% !important;
}

Related

Bootstrap offsetting columns that are not central

This is my first time using Bootstrap and I have some problems trying to get my content central.
I want to contain the content width, but allow the background colours to flow the full width of the page. I have tried to offset columns, however this just results in uneven spacing either side of the content.
My current markup is here:
https://codepen.io/charlyanderson/pen/bKggyb?editors=1100
<div class="container-fluid">
<div class="row">
<div id="example-col-1" class="col-lg-5">
<div class="row">
<div class="col-lg-8 offset-md-4">
<p>Fusce maximus, elit non mollis consectetur, neque nisi iaculis est, suscipit feugiat magna urna suscipit mauris. In hac habitasse platea dictumst. Vestibulum efficitur dui in ultricies placerat. Etiam nec ipsum ac lectus finibus malesuada. Vestibulum varius pretium ipsum imperdiet condimentum. Curabitur tincidunt maximus auctor. Donec vulputate mollis ligula, a pellentesque tortor tincidunt non.</p>
</div>
</div>
</div>
<div id="example-col-2" class="col-lg-7">
<div class="row">
<div class="col-lg-8">
<p>Fusce maximus, elit non mollis consectetur, neque nisi iaculis est, suscipit feugiat magna urna suscipit mauris. In hac habitasse platea dictumst. Vestibulum efficitur dui in ultricies placerat. Etiam nec ipsum ac lectus finibus malesuada. Vestibulum varius pretium ipsum imperdiet condimentum. Curabitur tincidunt maximus auctor. Donec vulputate mollis ligula, a pellentesque tortor tincidunt non.</p>
</div>
</div>
</div>
</div>
</div>

Use ml-auto for the first inner column and mr-auto for the second inner column.
#example-col-1 {
background-color: beige;
}
#example-col-2 {
background-color: pink;
text-align: right;
}
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div id="example-col-1" class="col">
<div class="row">
<div class="col-lg-8 ml-auto">
<p>Fusce maximus, elit non mollis consectetur, neque nisi iaculis est, suscipit feugiat magna urna suscipit mauris. In hac habitasse platea dictumst. Vestibulum efficitur dui in ultricies placerat. Etiam nec ipsum ac lectus finibus malesuada.
Vestibulum varius pretium ipsum imperdiet condimentum. Curabitur tincidunt maximus auctor. Donec vulputate mollis ligula, a pellentesque tortor tincidunt non.</p>
</div>
</div>
</div>
<div id="example-col-2" class="col">
<div class="row">
<div class="col-lg-8 mr-auto">
<p>Fusce maximus, elit non mollis consectetur, neque nisi iaculis est, suscipit feugiat magna urna suscipit mauris. In hac habitasse platea dictumst. Vestibulum efficitur dui in ultricies placerat. Etiam nec ipsum ac lectus finibus malesuada.
Vestibulum varius pretium ipsum imperdiet condimentum. Curabitur tincidunt maximus auctor. Donec vulputate mollis ligula, a pellentesque tortor tincidunt non.</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
https://codepen.io/anon/pen/BVpWwo
Use a dummy col-lg-4 column before the first inner column and after the second inner column.
#example-col-1 {
background-color: beige;
}
#example-col-2 {
background-color: pink;
text-align: right;
}
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div id="example-col-1" class="col">
<div class="row">
<div class="col-lg-4"></div>
<div class="col-lg-8">
<p>Fusce maximus, elit non mollis consectetur, neque nisi iaculis est, suscipit feugiat magna urna suscipit mauris. In hac habitasse platea dictumst. Vestibulum efficitur dui in ultricies placerat. Etiam nec ipsum ac lectus finibus malesuada.
Vestibulum varius pretium ipsum imperdiet condimentum. Curabitur tincidunt maximus auctor. Donec vulputate mollis ligula, a pellentesque tortor tincidunt non.</p>
</div>
</div>
</div>
<div id="example-col-2" class="col">
<div class="row">
<div class="col-lg-8">
<p>Fusce maximus, elit non mollis consectetur, neque nisi iaculis est, suscipit feugiat magna urna suscipit mauris. In hac habitasse platea dictumst. Vestibulum efficitur dui in ultricies placerat. Etiam nec ipsum ac lectus finibus malesuada.
Vestibulum varius pretium ipsum imperdiet condimentum. Curabitur tincidunt maximus auctor. Donec vulputate mollis ligula, a pellentesque tortor tincidunt non.</p>
</div>
<div class="col-lg-4"></div>
</div>
</div>
</div>
</div>
</body>
</html>
https://codepen.io/anon/pen/jKyBwy
You may find this question also useful.
Offsetting columns is not working (Bootstrap v4.0.0-beta)
Update
if you want to have a smaller left column and larger right, use this code.
#example-col-1 {
background-color: beige;
}
#example-col-2 {
background-color: pink;
}
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div id="example-col-1" class="col-5">
<div class="row">
<div class="col-lg-4"></div>
<div class="col-lg-8">
<p>Fusce maximus, elit non mollis consectetur, neque nisi iaculis est, suscipit feugiat magna urna suscipit mauris. In hac habitasse platea dictumst. Vestibulum efficitur dui in ultricies placerat. Etiam nec ipsum ac lectus finibus malesuada. Vestibulum varius pretium ipsum imperdiet condimentum. Curabitur tincidunt maximus auctor. Donec vulputate mollis ligula, a pellentesque tortor tincidunt non.</p>
</div>
</div>
</div>
<div id="example-col-2" class="col-7">
<div class="row">
<div class="col-lg-9 text-right">
<p>Fusce maximus, elit non mollis consectetur, neque nisi iaculis est, suscipit feugiat magna urna suscipit mauris. In hac habitasse platea dictumst. Vestibulum efficitur dui in ultricies placerat. Etiam nec ipsum ac lectus finibus malesuada. Vestibulum varius pretium ipsum imperdiet condimentum. Curabitur tincidunt maximus auctor. Donec vulputate mollis ligula, a pellentesque tortor tincidunt non.</p>
</div>
<div class="col-lg-3"></div>
</div>
</div>
</div>
</div>
</body>
</html>
By the way, better to use text-right instead of text-align: right; style.

push and pull effect is not working in bootstrap 3

I want to show list above the paragraph in small device and also in extra small device. I uses push-* and pull-* class that are available in bootstrap but its not working. please suggest. Thanks in advance.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-6 col-sm-push-6 col-xs-12 col-xs-push-12">
<p>Lorem ipsum dolor sit amet, mauris suspendisse viverra eleifend tortor tellus suscipit, etiam bibendum cras posuere pede placerat, velit neque felis. Turpis ut mollis, elit et vestibulum mattis integer aenean nulla. Dignissim neque, nulla neque. Ultrices proin mi urna nibh ut, aenean sollicitudin etiam libero nisl.</p>
</div>
<div class="col-md-8 col-sm-6 col-sm-pull-6 col-xs-12 col-xs-pull-12">
<ul class="list-unstyled">
<li>sse viverra eleifend tortor tellus suscipit</li>
<li>cras posuere pede placerat, velit</li>
<li>Lorem ipsum dolor sit amet</li>
<li>sse viverra eleifend tortor tellus suscipit</li>
<li>cras posuere pede placerat, velit</li>
</ul>
</div>
</div>
</div>

If you want the list on top on small devices and to the right on medium devices you need to change the order of the elements in the DOM. Then you can use push and pull to do as you wish
Click the "Full page" button to see...
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-8 col-md-push-6">
<ul>
<li>sse viverra eleifend tortor tellus suscipit</li>
<li>cras posuere pede placerat, velit</li>
<li>Lorem ipsum dolor sit amet</li>
<li>sse viverra eleifend tortor tellus suscipit</li>
<li>cras posuere pede placerat, velit</li>
</ul>
</div>
<div class="col-md-4 col-md-pull-6">
<p>Lorem ipsum dolor sit amet, mauris suspendisse viverra eleifend tortor tellus suscipit, etiam bibendum cras posuere pede placerat, velit neque felis. Turpis ut mollis, elit et vestibulum mattis integer aenean nulla. Dignissim neque, nulla neque. Ultrices proin mi urna nibh ut, aenean sollicitudin etiam libero nisl.</p>
</div>
</div>
</div>

How to have a float:right element with a text block without the text overlapping on it in bootstrap 3

I am new to web development. I want achieve something like this.
Here, the "Edit" portion can be of any width and the text block can be of any height. Irrespective of any height or width, I want to keep the layout the same.
I have tried something like this
HTML
<form class="form-horizontal form-group-sm">
<div class="form-group">
<label for="text" class="col-sm-4 control-label">Address</label>
<div class="col-sm-8 clearfix">
<?php if($condition) { ?>
<span class="settings">
<i class="glyphicon glyphicon-pencil"></i>Edit
</span>
<?php } ?>
<label class="form-control-static">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur tristique elit ac dolor elementum sit amet tempus ante euismod. Aenean quis enim urna, non pulvinar nunc. Aenean in varius elit. Vestibulum sed mollis tellus. Nullam id magna ligula, quis elementum turpis. Morbi felis felis, vestibulum dictum mattis commodo, suscipit et nunc. Fusce in semper nisi. Vivamus et sem velit, sed sagittis turpis. Aenean sollicitudin elit sed eros posuere id vehicula ipsum tristique. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi diam odio, tempus sed sollicitudin eu, ullamcorper ullamcorper erat. Nullam tortor dolor, porttitor eget feugiat nec, aliquet non orci. Integer eros risus, luctus in mollis quis, scelerisque quis odio. Fusce vehicula sagittis justo, sit amet mollis sem adipiscing a. Sed semper, dui sed convallis interdum, libero felis posuere est, at pulvinar orci felis et lectus.</label>
</div>
</div>
CSS
.form-control-static{word-wrap: break-word;}
.settings{
float: right;
padding: 7px 0 7px 3px;
}
I do not want to fix height or width of any element as shown here since my layout is responsive. Checkout my fiddle and please update it if possible. Thanks in advance.

I have updated the fiddle.Were you trying to achieve that.Check them.
<form class="form-horizontal form-group-sm">
<div class="form-group">
<label for="text" class="col-sm-3 control-label">Address</label>
<div class="col-sm-8 clearfix">
<label class="form-control-static">
<button class="btn btn-default btn-xs pull-right">edit</button>
Lorem ipsum
</label>
</div>
</div>
UPDATED FIDDLE
http://jsfiddle.net/u83gse13/5/

Bootstrap: Getting an image to resize to 100% height in uneven 2 column layout

http://jsfiddle.net/dq5T5/
The fiddle above shows the problem.
Since the row has a white background, there ends up being empty space under the image when the browser window is resized.
I just want the image to fill the entire height of the left column, but I also need it to stack vertically as it currently does (responsive).
<body>
<div class="widereport">
<div class="col-md-4 no-gutters">
<figure class="animated-overlay overlay-alt">
<img class="img-responsive" width="640" height="400" alt="img alt" src="http://placehold.it/600x450" itemprop="image">
<a title="image" href="/"></a>
<figcaption>
<div class="thumb-info thumb-info-alt">
<i class="ss-navigateright"></i>
</div>
</figcaption>
</figure>
</div>
<div class="col-md-8">
<h5 class="portfolio-subtitle" itemprop="alternativeHeadline">mini menta | March 2014</h5>
<h3 class="portfolio-item-title mt0" itemprop="name headline">
Title here
</h3>
<p class="itemdeets">85 Pages</p>
<div class="portfolio-item-excerpt" itemprop="description">
<p class="mb9">Sed non orci sed ante dignissim aliquam. Fusce in sapien leo. Praesent justo nibh, dapibus eu fermentum sit amet, rutrum sit amet nunc. Aliquam augue. Vestibulum ante ipsum primis in fauc ibus orci luctus et ultrices posuere cubilia Curae; Integer in enim dui. Suspendisse potenti. Sed placerat pellentesque nibh ut varius. Morbi aliquet nulla at sem consequat eleifend. Sed non orci sed ante dignissim aliquam. Fusce in sapien leo. Praesent justo nibh, dapibus eu fermentum sit amet, rutrum sit amet nunc. Aliquam augue. Sed placerat pellentesque nibh ut varius. Morbi aliquet nulla at sem consequat eleifend. Sed placerat pellentesque nibh ut varius. Morbi aliquet nulla at sem consequat eleifend. Sed placerat pellentesque nibh ut varius. Morbi aliquet nulla at sem consequat eleifend.</p>
</div>
<p>
<span class="text pull-right mb9">More Information</span>
</p>
</div>
</div>
</body>

Try adding the below in the class for img-responsive in the CSS:
.img-responsive {
height: 100%;
width: 100%;
}
Fiddle

Allow a span to overflow row in twitter bootstrap

I am looking to do something with my layout where my sidebar overflows a background change.
You can see in the jsfiddle here what I have currently. I am sure I just have things written in my following html out of order. I want the darker gray to show directly below the recent posts pictures but allow the sidebar to expand down into it. I can not just use a background image to do this because the length of the lighter content will change on other wordpress template pages.
Here is the code I currently have
<div id="main-content-container">
<div class="container">
<div class="row">
<div id="main-content" class="span9">
<div class="row">
<div id="featured-article" class="span9"><img src="http://placehold.it/715x340" /></div>
</div>
<div id="recent-posts" class="row">
<div class="span9">
<div class="row">
<div class="span9">
<h1>Recent Posts</h1>
</div>
</div>
<div class="row">
<div class="span3"><img src="http://placehold.it/220" /></div>
<div class="span3"><img src="http://placehold.it/220" /></div>
<div class="span3"><img src="http://placehold.it/220" /></div>
</div>
</div>
</div>
</div>
<div id="sidebar" class="span3">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sed justo vitae quam accumsan semper. Vivamus varius orci posuere turpis congue semper vulputate eros congue. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas eleifend magna in nulla semper vestibulum. Nulla a auctor odio. Vestibulum condimentum placerat tortor ut tempus. Morbi aliquet pellentesque sapien eu pharetra. Vivamus luctus, urna id pretium congue, dui nisi vestibulum nunc, non tincidunt justo dolor eget lacus. Aliquam condimentum, urna at blandit tristique, nulla felis porta erat, congue consectetur tortor mi vitae neque.
Nullam pellentesque, velit in convallis sagittis, enim enim viverra elit, ac tincidunt tellus elit eget dui. Donec sit amet odio eros. Nullam vitae pretium augue. Maecenas sit amet nisi ante, quis laoreet augue. Aliquam commodo suscipit bibendum. Duis imperdiet ornare magna, non porttitor lacus faucibus eget. Aenean viverra purus quis turpis fringilla hendrerit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc suscipit molestie nunc. Donec convallis mollis dui nec accumsan. Donec posuere ipsum ut nisl ornare eget sodales metus feugiat. Aliquam viverra, nunc nec malesuada hendrerit, velit nisl placerat augue, sed feugiat nisl turpis id risus. Nunc lobortis massa vitae justo fringilla vel condimentum lectus fermentum.
</p>
</div>
</div>
</div>
</div>
<div id="extra-body-container">
This part should fall right under the recent posts pictures and allow the sidebar to overflow on top of it.
</div>
I have tried to set a float on the sidebar but that did not work. I am not sure if the way I have my html will allow me to do this or not with only modifying my css.

the row above the extra-body-container try setting it to margin-left: -100% along w/ the body-bg.png then on the extra-body-contain put the margin-left to 50% and the width to 100%
Check it out here: http://jsfiddle.net/3sBkk/9/show/
<div id="main-content-container">
<div class="container">
<div class="row">
<div id="main-content" class="span9">
<div class="row">
<div id="featured-article" class="span9">
<img src="http://placehold.it/715x340" />
</div>
</div>
<div id="recent-posts" class="row">
<div class="span9">
<div class="row">
<div class="span9">
<h1>Recent Posts</h1>
</div>
</div>
<div class="row">
<div class="span3">
<img src="http://placehold.it/220" />
</div>
<div class="span3">
<img src="http://placehold.it/220" />
</div>
<div class="span3">
<img src="http://placehold.it/220" />
</div>
</div>
<div class="row" style="margin-left: -100%; background: url('../img/extra-body-bg.png') #AAAAAA repeat-x top center;">
<div id="extra-body-container" class="span12">This part should fall right under the recent posts pictures and allow the sidebar to overflow on top of it.</div>
</div>
</div>
</div>
</div>
<div id="sidebar" class="span3" style="z-index: 999;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sed justo vitae quam accumsan semper. Vivamus varius orci posuere turpis congue semper vulputate eros congue. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas eleifend magna in nulla semper vestibulum. Nulla a auctor odio. Vestibulum condimentum placerat tortor ut tempus. Morbi aliquet pellentesque sapien eu pharetra. Vivamus luctus, urna id pretium congue, dui nisi vestibulum nunc, non tincidunt justo dolor eget lacus. Aliquam condimentum, urna at blandit tristique, nulla felis porta erat, congue consectetur tortor mi vitae neque. Nullam pellentesque, velit in convallis sagittis, enim enim viverra elit, ac tincidunt tellus elit eget dui. Donec sit amet odio eros. Nullam vitae pretium augue. Maecenas sit amet nisi ante, quis laoreet augue. Aliquam commodo suscipit bibendum. Duis imperdiet ornare magna, non porttitor lacus faucibus eget. Aenean viverra purus quis turpis fringilla hendrerit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc suscipit molestie nunc. Donec convallis mollis dui nec accumsan. Donec posuere ipsum ut nisl ornare eget sodales metus feugiat. Aliquam viverra, nunc nec malesuada hendrerit, velit nisl placerat augue, sed feugiat nisl turpis id risus. Nunc lobortis massa vitae justo fringilla vel condimentum lectus fermentum.</p>
</div>
</div>
</div>
Hope this helps or at least gets you in the right direction.

looks like (as you said) you just had a couple things out of order
Here is a revised fiddle.
http://jsfiddle.net/3sBkk/1/
and really it was just a matter of moving your content into the main wrapping element, and creating a row out of it, adjusting the span to 12, and setting the z-order of sidebar to ensure it overlaps.
I'm not exactly sure how to include the code here but here is the culprit.
<div id="recent-posts" class="row">
<div class="span9">
<div class="row">
<div class="span9">
<h1>Recent Posts</h1>
</div>
</div>
<div class="row">
<div class="span3">
<img src="http://placehold.it/220" />
</div>
<div class="span3">
<img src="http://placehold.it/220" />
</div>
<div class="span3">
<img src="http://placehold.it/220" />
</div>
</div>
<div class="row">
<div id="extra-body-container" class="span12">This part should fall right under the recent posts pictures and allow the sidebar to overflow on top of it.</div>
</div>
</div>
</div>
EDIT: To achieve both the overlapping sidebar and the 100% width you're going to have to get kind of hacky with your css, and I don't necessarily endorse it, but is it possible, sure, anything is possible.
http://jsfiddle.net/2Yet7/ (sorry its so ugly).

Resources