CODEWITHSUNDEEP
csshtmlpositioncss-float
AMC
AMC

Reputation: 1695

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

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

Upvotes: 0

Views: 431

Answers (5)

Julian Knight
Julian Knight

Reputation: 4923

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.

Upvotes: 1

Bassel Shawi
Bassel Shawi

Reputation: 614

try this to recent div

white-space:nowrap;

Upvotes: 0

CoursesWeb
CoursesWeb

Reputation: 4237

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

#recent .divider {
    float: left;
}

Upvotes: 0

Rorok_89
Rorok_89

Reputation: 375

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)

Upvotes: 1

dennis
dennis

Reputation: 2020

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.

Upvotes: 0

Related Questions