What am I doing wrong again? The Placeholder column should align with the container div but it isn't. Here's the code
<div class="container">
<!--Content Area-->
<div id="content" class="row-fluid">
<!--Main Content Area-->
<div class="span6" id="main">
<h2>PLACEHOLDER</h2>
<div class="hero-unit">
<h1>Marketing stuff!</h1>
<br />
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. <br />Fusce dapibus, tellus ac cursus commodo, tortor mauris<br /> condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<br />
<br />
Get Started
</div>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
</div>
<!--Right Sidebar-->
<div class="span3" id="right-sidebar">
</div>
</div>
Related
I am trying to achieve the following layout:
I have been able to do this more or less with two issues:
The columns overlap with the image
The circles are not centered. Moreover when I see this on the mobile, amongst other issues, the two circles stack on top of each other.
Here's my HTML:
<div class="container"> <!-- can't change this -->
<div class="col-md-8 column"> <!-- can't change this -->
<!-- can change anything below this -->
<div class="row">
<div class="col-md-3">
<img alt="Some Image" src="http://lorempixel.com/340/340/" />
</div>
<div class="col-md-9">
<div class="row">
<div class="col-md-12">
<p>
Lorem ipsum dolor sit amet
</p>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="circle">450
<br> reviews </div>
<div class="circle">4.2 million
<br> readers </div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<p>
Lorem ipsum dolor sit amet
</p>
</div>
</div>
</div>
</div>
Live Demo
Please help resolve these issues.
It doesn't necessarily overlaps, in this particular case, simply give the image img-responsive class so the width of the image is always at max 100%.
To solve the circle issues, you can put them inside a col-xs-6 so they don't stack on top of each other.
Here is a demo: https://codepen.io/anon/pen/WMEMbW
<div class="container">
<!-- can't change this -->
<div class="col-md-8 column">
<!-- can't change this -->
<!-- can change anything below this -->
<div class="row">
<div class="col-md-3">
<img alt="Some Image" src="http://lorempixel.com/340/340/" class="img-responsive" />
</div>
<div class="col-md-9">
<div class="row">
<div class="col-md-12">
<p>
Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>. Aliquam eget sapien sapien. Curabitur in metus urna. In hac habitasse platea dictumst. Phasellus eu sem sapien, sed vestibulum velit. Nam purus nibh, lacinia non faucibus et, pharetra in dolor. Sed iaculis posuere diam ut cursus. <em>Morbi commodo sodales nisi id sodales. Proin consectetur, nisi id commodo imperdiet, metus nunc consequat lectus, id bibendum diam velit et dui.</em> Proin massa magna, vulputate nec bibendum nec, posuere nec lacus. <small>Aliquam mi erat, aliquam vel luctus eu, pharetra quis elit. Nulla euismod ultrices massa, et feugiat ipsum consequat eu.</small>
</p>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="center-block">
<div class="col-xs-6">
<div class="circle">450
<br> reviews
</div>
</div>
<div class="col-xs-6">
<div class="circle">4.2 million
<br> readers
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<p>
Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>. Aliquam eget sapien sapien. Curabitur in metus urna. In hac habitasse platea dictumst. Phasellus eu sem sapien, sed vestibulum velit. Nam purus nibh, lacinia non faucibus et, pharetra in dolor. Sed iaculis posuere diam ut cursus. <em>Morbi commodo sodales nisi id sodales. Proin consectetur, nisi id commodo imperdiet, metus nunc consequat lectus, id bibendum diam velit et dui.</em> Proin massa magna, vulputate nec bibendum nec, posuere nec lacus. <small>Aliquam mi erat, aliquam vel luctus eu, pharetra quis elit. Nulla euismod ultrices massa, et feugiat ipsum consequat eu.</small>
</p>
</div>
</div>
</div>
</div>
I guess you should be using the help of some media queries as well.
Have made some changes to the demo you shared.
Updated Demo
CSS
.circle {
display: inline-flex;
justify-content: center;
align-items: center;
text-align: center;
margin-right: 10px;
width: 200px;
height: 200px;
font-size: 35px;
border-radius: 50%;
color: #fef;
background: #000
}
.img-left {
max-width: 100%;
}
.circle-wrapper {
text-align: center;
}
#media (max-width:500px) {
.circle-wrapper .circle{
width: 150px;
height: 150px;
font-size: 25px;
}
}
HTML:
<div class="container"> <!-- can't change this -->
<div class="col-md-8 column"> <!-- can't change this -->
<!-- can change anything below this -->
<div class="row">
<div class="col-md-3">
<img class="img-left" alt="Some Image" src="http://lorempixel.com/340/340/" />
</div>
<div class="col-md-9">
<div class="row">
<div class="col-md-12">
<p>
Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>. Aliquam eget sapien sapien. Curabitur in metus urna. In hac habitasse platea dictumst. Phasellus eu sem sapien, sed vestibulum velit. Nam purus nibh, lacinia non faucibus et, pharetra in dolor. Sed iaculis posuere diam ut cursus. <em>Morbi commodo sodales nisi id sodales. Proin consectetur, nisi id commodo imperdiet, metus nunc consequat lectus, id bibendum diam velit et dui.</em> Proin massa magna, vulputate nec bibendum nec, posuere nec lacus. <small>Aliquam mi erat, aliquam vel luctus eu, pharetra quis elit. Nulla euismod ultrices massa, et feugiat ipsum consequat eu.</small>
</p>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="row circle-wrapper">
<div class="circle">450
<br> reviews </div>
<div class="circle">4.2 million
<br> readers </div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<p>
Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>. Aliquam eget sapien sapien. Curabitur in metus urna. In hac habitasse platea dictumst. Phasellus eu sem sapien, sed vestibulum velit. Nam purus nibh, lacinia non faucibus et, pharetra in dolor. Sed iaculis posuere diam ut cursus. <em>Morbi commodo sodales nisi id sodales. Proin consectetur, nisi id commodo imperdiet, metus nunc consequat lectus, id bibendum diam velit et dui.</em> Proin massa magna, vulputate nec bibendum nec, posuere nec lacus. <small>Aliquam mi erat, aliquam vel luctus eu, pharetra quis elit. Nulla euismod ultrices massa, et feugiat ipsum consequat eu.</small>
</p>
</div>
</div>
</div>
</div>
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;
}
I want to create a bootstrap based WordPress. But the out put doesn't give me the same. Attached screenshot.
The code for wordpress is below:
<div class="container">
<img src="<?php echo get_template_directory_uri(); ?>/images/security-and-surveillance-banner.jpg" class="img-fluid" alt="Responsive image" style="width:100%;display:block">
<!-- Main component for a primary marketing message or call to action -->
<div class="jumbotron">
<div class="row">
<?php query_posts('showposts=3');?>
<?php if(have_posts()) :?><?php while(have_posts()) : the_post(); ?>
<div class="col-md-4">
<h2><?php the_title(); ?></h2>
<?php the_content(); ?>
</div>
<?php endwhile;?>
<?php endif; ?>
</div>
</div>
</div>
and the cited code is below, check the code, and seems to be the same for HTML, not sure why giving me different view?
<div class="container">
<img src="images/sample1.png" class="img-fluid" alt="Responsive image" style="width:100%;display:block">
<!-- Main component for a primary marketing message or call to action -->
<div class="jumbotron">
<div class="row">
<div class="col-md-4">
<h2>Heading</h2>
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
</div>
<div class="col-md-4">
<h2>Heading</h2>
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
</div>
<div class="col-md-4">
<h2>Heading</h2>
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
</div>
</div>
</div>
</div>
What I want to output is that same paragraph font style and background color. If I remove jumbotron, then it would be the same as I wish, but background color will be removed, which is not my expected.
I've been trying to recreate a list like the one below (the checkbox and the x are just png images) but I can't seem to figure it out.
I have tried using two texted cols but I can't for the life of me figure out how to get the alignment and the text breaks correct.
Any help would be very much appreciated.
Right now, my code looks like this:
<div class="row">
<div class="col-md-6 col-md-6-offset-2">
<h4 style="text-align: center;">THEY LOVE</h4>
<div class="row ">
<div class="col-xs-1">
<img src="http://d26mw3lpqa99qj.cloudfront.net/prod-fool/sell/yes-15d4ba569f9f4beb7d8cfd8adc8ed886.png">
</div>
<div class="col-xs-11">
<p style="padding-top: 8px;">Stuff</p>
</div>
</div>
</div>
<div class="col-md-6" style="text-align: center;"><h4>THEY DON'T LOVE</h4></div>
<div class="row ">
<div class="col-xs-1">
<img src="http://d26mw3lpqa99qj.cloudfront.net/prod-fool/sell/yes-15d4ba569f9f4beb7d8cfd8adc8ed886.png">
</div>
<div class="col-xs-10">
<p style="padding-top: 8px;">Stuff</p>
</div>
</div>
</div>
DEMO: http://jsbin.com/faboze/1/
http://jsbin.com/faboze/1/edit?html,css,output
Look carefully at the html and the css so you can understand how to adjust the spacing and how a hanging indent is done with an un-ordered list. Also look at the grid classes used.
<div class="container">
<div class="row">
<div class="col-sm-offset-2 col-sm-4">
<h4 class="text-center">THEY LOVE</h4>
<ul class="list-unstyled love">
<li>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.</li>
<li>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</li>
<li>Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.</li>
<li>Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</li>
</ul>
</div>
<div class="col-sm-4">
<h4 class="text-center">THEY DON’T LOVE</h4>
<ul class="list-unstyled no-love">
<li>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.</li>
<li>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</li>
<li>Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.</li>
<li>Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</li>
</ul>
</div>
</div>
</div>
CSS
.list-unstyled.love li,
.list-unstyled.no-love li {
background: url('http://d26mw3lpqa99qj.cloudfront.net/prod-fool/sell/yes-15d4ba569f9f4beb7d8cfd8adc8ed886.png') no-repeat;
padding:0 0 5% 45px;
}
/* ======= change the no-love image ========== */
.list-unstyled.no-love li {
background: url('http://d26mw3lpqa99qj.cloudfront.net/prod-fool/sell/yes-15d4ba569f9f4beb7d8cfd8adc8ed886.png') no-repeat;
}
You didnt close your tags properly. Check below code.
You can use text-center class from bootstrap for centering the stuff.
<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row text-center">
<div class="col-md-6 col-md-6-offset-2">
<h4>THEY LOVE</h4>
<div class="row ">
<div class="col-xs-1">
<img src="http://d26mw3lpqa99qj.cloudfront.net/prod-fool/sell/yes-15d4ba569f9f4beb7d8cfd8adc8ed886.png"/>
</div>
<div class="col-xs-11">
<p style="padding-top: 8px;">Stuff</p>
</div>
</div>
</div>
<div class="col-md-6"><h4>THEY DON'T LOVE</h4>
<div class="row ">
<div class="col-xs-1">
<img src="http://d26mw3lpqa99qj.cloudfront.net/prod-fool/sell/yes-15d4ba569f9f4beb7d8cfd8adc8ed886.png"/>
</div>
<div class="col-xs-11">
<p style="padding-top: 8px;">Stuff</p>
</div>
</div>
</div>
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).