3 divs in a row- can't get the far right one to align

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 -->

Answers


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)


I suggest a Google search first. It looks like any of the top results could be adjusted to your needs.

Of course, the simplest and most robust approach is to use a TABLE which is trivially easy to get right and works correctly on all platforms of the last decade. It also degrades correctly for folk who need extreme settings such as very large zoom levels. It also doesn't need any fancy CSS, HTML5 or overrides to fix broken IE versions.

My version of Rorok_89's answer based on tables. In truth, maybe not the "simplest" as I said. The CSS is simpler but there are a few more characters in the HTML. I would note that the CSS could be made simpler than the example.


May I suggest a different approach maybe?

The use of tables come pretty much in handy here so use the <tr>and <td> tags to easily align the elements.

but if you don't like using tables you can always use the position: absolute and position with margin and paddings.


Try use float: left; to #recent-blog too. And:

#recent .divider {
    float: left;
}

try this to recent div

white-space:nowrap;

Need Your Help

Include External headers in Eclipse for C

c eclipse eclipse-cdt

I have some external header files in a separate directory (its the sqlite3.h). I want to be able to use them in my Eclipse CDT project. How would I include the directory to Eclipse?