Having issues applying padding to divs created through WordPress - html

Question

I have two half width divs that have the same class but are assigned posts through WordPress. Currently I have them lined up with full width posts above and below, but, I need to apply 5px of padding to both but not on the edges, i.e. left post has right padding, right post has left padding and I can't think for the life of me how to do this. I tried using different post formats and checking which format the post was and applying padding based on that but it didn't work as intended. For some reason, it pushed the divs to the center and had padding in the wrong places. Firstly here's my PHP structure with the if/else:
<?php if (has_post_format('status')) : ?>
<div class = "twocolumnpost left">
<div <?php post_class() ?>>
<?php if (has_post_thumbnail()) : ?>
<div class = "post-thumb">
<?php the_post_thumbnail(); ?>
<div class = "caption">
<h4><?php the_title(); ?></h4>
<p><?php echo get_the_date(); ?></p>
</div>
</div>
<?php endif; ?>
</div>
</div>
<?php elseif (has_post_format('gallery')) : ?>
<div class = "twocolumnpost right">
<div <?php post_class() ?>>
<?php if (has_post_thumbnail()) : ?>
<div class = "post-thumb">
<?php the_post_thumbnail(); ?>
<div class = "caption">
<h4><?php the_title(); ?></h4>
<p><?php echo get_the_date(); ?></p>
</div>
</div>
<?php endif; ?>
</div>
</div>
<?php endif; ?>
As you can see it has padding on both the left and right sides (it should line up with the post above) and not enough in the middle. The CSS I used for this is:
.twocolumnpost .post {
float: left;
display: block;
width: 50%;
padding: 10px 0px;
}
.twocolumnpost.left {
padding-right: 0px;
}
.twocolumnpost.right {
padding-left: 0px;
}
.twocolumnpost img, .twocolumnpost iframe {
max-width: 440px;
max-height: 294px;
width: 100%;
padding: 0;
}
Now what I'd like it to be like is this:
BUT with 10px of padding in the center of the two posts but NOT the sides i.e. 5px right on the left post, 5px left on the right post. The only difference with the second image is that the max-width of the pictures are set to 450px instead of 400px and obviously have no left or right padding.
No matter what I try it doesn't line up properly, and I'm at a loss. Any help would be greatly appreciated. Ideally this could be done without the need for two different post types so it applies correctly to any twocolumnpost but the structure as is works too. Thanks!
Live sit is here: http://suburbia.comoj.com/wordpress/

Answer 1

There are several ways of resolving this issue, but it depends on what kind of users (and browsers) do you want to support. If you don't mind using modern standards (therefore leaving some users on legacy browsers behind), you can use the the calc property:
.twocolumnpost {
width: calc(50% - 10px);
padding: 10px 0px;
}
.twocolumnpost.left {
float: left;
}
.twocolumnpost.right {
float: right;
}
p/s: You don't need to declare the display: block property when you set floats — that's the default behavior for floats anyway.
Even better, you can take advantage of CSS flexbox, but you need to set the parent of .twocolumnpost to have flex display. Let's say the parent has the class name of .twocolumnpost-parent:
.twocolumnpost-parent {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
}
.twocolumnpost .post {
width: calc(50% - 10px);
}
You can see the proof-of-concept fiddle here: http://jsfiddle.net/teddyrised/DMy7r/
Update: On a related note, I have written a jQuery script to do the exact same, but with gallery images. Perhaps you can adapt it to your needs: Responsive Photosets. Not exactly relevant, but addresses the same issue that you are currently facing.

Answer 2

It could be just a white space issue.
You can either so something like have an html comment between your divs killing the whitespace or you can float the divs over. You might have to rework the containing elements to make sure the floats don't do crazy things. But floating the left and right columns (twocolumnpost) should have them flush against each other (unless there is padding/margin on them).
In short I think the gap is being created by the whitespace between the divs with the twocolumnpost class. If you float this two next to eachtoher or remove the whitespace you should be able to have them flush against each other.