Hi all,

I'm trying to change the main page of a Wordpress theme to have 3 rows of 2 boxes, each with a different post/page. (They'll always be the same.)

If you look here: http://blog.justinverrengia.com/, you'll notice two posts with images ... I want those posts to be as is, but below the boxes.

I can't seem to get it right, and when I place them ... it shifts everything so far off the page I have to scroll to view the page!

Any direction would be appreciated, thank you ~


1 answer


If I understood what you're after correctly, you're trying to place the two posts side by side, right? I achieved that as follows:

.post {
    background: #FFFFFF;
    border: 1px solid #CCCCCC;
    display: inline-block;
    margin: 0 5px 0 0;
    vertical-align: top;
    width: 285px;

I also removed the float, width and height from .title. That should work in IE, Firefox3+, Chrome, Safari and Opera.

Alternatively, you could try floating the .post box:

.post {
    background: #FFFFFF;
    border: 1px solid #CCCCCC;
    float: left;
    margin: 15px 5px 10px;
    width: 283px;

There seems to be something a bit screwy with your HTML though. Could you run it through the validator?

Answered almost 10 years ago by Olly Hodgson