CODEWITHSUNDEEP
phphtmlcsswordpress
Adam Short
Adam Short

Reputation: 498

Nesting two divs next to each other - WordPress

I'm creating a WordPress theme and can't get two posts to nest next to each other correctly, the guys on the WP forums haven't been any help (one response). Without any of the WP hookups (the PHP stuff) the divs nest correctly, I styled and structured them like this:

CSS:

.singlecolumnpost .post {
    float: left;
    display: block;
}

.twocolumnpost .post {
    float: left;
    display: block;
    width: 50%;
}

.singlecolumnpost img {
    display: block;
    max-width: 940px;
    max-height: 529px;
    width: 100%;
    padding: 5px 0;
}

.twocolumnpost img {
    max-width: 460px;
    max-height: 259px;
    width: 100%;
    padding: 5px 0 5px 0;
    z-index: 4;
}

.post-thumb {
    width: 100%;
    margin: 0 auto;
}

HTML:

<div id = "main">
    <div class = "singlecolumnpost">
        <div class = "post">
            <div class = "post-thumb">
                <a href = "#"><img src = "img/db.jpeg"</a>
            </div>
        </div>
    </div>
    <div class = "twocolumnpost">
        <div class = "post">
            <div class = "post-thumb">
                <a href = "#"><img src = "img/db.jpeg"</a>
            </div>
        </div>
        <div class = "post 2">
            <div class = "post-thumb 2">
                <a href = "#"><img src = "img/db.jpeg"</a>
            </div>
        </div>
    </div>
    <div class = "singlecolumnpost">
        <div class = "post">
            <div class = "post-thumb">
                <a href = "#"><img src = "img/db.jpeg"</a>
            </div>
        </div>
    </div>
</div>

This works because I declared a post class twice inside the twocolumnpost. Now for the wordpress structure (same styling):

<div class = "twocolumnpost">
    <div <?php post_class() ?>>
        <?php if (has_post_thumbnail()) : ?>                            
            <div class = "post-thumb">
                <a href="<?php echo the_permalink(); ?>"><?php the_post_thumbnail(); ?></a>
                <div class = "caption">
                    <p class = "caption-text">Caption</p>    
                </div>
            </div>
        <?php endif; ?>
    </div>
</div>

This makes them nest weirdly as you can see here: http://suburbia.comoj.com/wordpress/

I'm struggling to get them to play ball and just sit next to each other with the correct padding and I'm not sure if this is because I've only declared one post in the twocolumnpost. If I do declare two posts, it doubles the image which isn't right.

So what I'm asking, is either to have the posts aligning nicely with current structure, or a method of checking the previous post for the first post id, and displaying the next one on the second post.

Upvotes: 0

Views: 615

Answers (1)

mdelorey
mdelorey

Reputation: 136

First, get rid of the empty pagination div ntgCleaner is right that is messing it up.

The other thing is that your CSS applies a 5px padding to .twocolumnpost img but the post on the left isn't an image, it's a video in an iframe tag so that isn't being applied. Either change the CSS selector to be .twocolumnpost img, .twocolumnpost iframe or remove the padding.

This is what it looked like when I did that:

enter image description here

Upvotes: 1

Related Questions