Question

I’ve struggled with this a good bit this morning; I’m creating what will eventually be a WP theme that will have a section of recent work, a divider, and a section of recent blog posts aligned horizontally.
Things are starting to shape up nicely, but the section on the far right keeps getting pushed down. I don’t think it’s an issue of width, as a)there seems to be more than enough room and b)regardless of what I do to the various widths and paddings the problem persists. I feel like it might have something to do with floats, but I’m not sure how to troubleshoot that.

Anyway, here’s what I’m looking at:

I’d like for it to be something like this, with the divider perfectly in the center of the page:

content content content | content content content

#recent {
    border-top: 1px solid #202020;
    padding-bottom: 40px;
    padding-top: 40px;
}

#recent .divider {
}

#recent #recent-work {
    float: left;
}

#recent #recent-work p span {
    font-family: nevis-webfont;
    font-size: 112.5%;
    font-weight: normal;
    letter-spacing: 1px;
    text-transform: uppercase;
}

#recent #recent-work a {
    padding-bottom: 40px;
    padding-right: 20px;
}

#recent #recent-work .next{
    float: right;
}

#recent #recent-blog {
    float: right;
}

#recent #recent-blog p span {
    font-family: nevis-webfont;
    font-size: 112.5%;
    font-weight: normal;
    letter-spacing: 1px;
    padding-left: 20px;
    text-transform: uppercase;
}

#recent #recent-blog a {
    padding-bottom: 40px;
    padding-left: 20px;
}

#recent #recent-blog .next{
    float: right;
}

and

<div id="recent">
    <div id="recent-work">
           <p><span>Recent Work</span></p>
           <a href="#"><img src="http://lorempixel.com/120/120/" alt="Click for more information" /></a>
               <a href="#"><img src="http://lorempixel.com/120/120/" alt="Click for more information" /></a>
               <a href="#"><img src="http://lorempixel.com/120/120/" alt="Click for more information" /></a>
    </div><!-- end recent-work -->

    <div class="divider">
        <img src="img/divider.png" alt="Section divider" />
    </div><!-- end divider -->

    <div id="recent-blog">
        <p><span>Recent Blog</span></p>
            <a href="#"><img src="http://lorempixel.com/120/120/" alt="Click for more information" /></a>
            <a href="#"><img src="http://lorempixel.com/120/120/" alt="Click for more information" /></a>
            <a href="#"><img src="http://lorempixel.com/120/120/" alt="Click for more information" /></a>
       </div><!-- end recent-blog -->
</div><!-- end recent -->

Answer 1

It seems you didn’t set the float for your divider. Add:

#recent .divider {
display: block; 
float: left;
}

#recent #recent-work {
display: block;
float: left;
}

You should add the display: block property for all of the divs, just in case.

Example here (slide the left part so the viewport gets big enough)