HTML div child nodes aren't aligning - html

Question

I'm editing a basic Wordpress template and looking to have a multi-column front page (showing 2 sets of articles per row). I've done the following in CSS:
.front-page-container article:nth-child(odd) {
width:50%;
float:left;
clear:both;
}
.front-page-container article:nth-child(even) {
width:50%;
float:right;
}
where front-page-contaner is the class of a containing div. The HTML structure is:
<div class="front-page-container">
<article id="post-1"></article>
<article id="post-2"></article>
<article id="post-3"></article>
<!-- etc -->
</div>
I want to align post 1 & 2 in the same line, and have post 3 (and 4) on the next row.
While the CSS sort of works, the two posts I want together don't line up as shown is this picture. I've tried adjusting the widths in case there was some sort of overlap but it doesn't fix the issue (even though they get visibly smaller).
Any help/pointers would be appreciated :)

Answer 1

.front-page-container::after { clear: both }
.front-page-container * {
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
.front-page-container article:nth-child(odd) {
width:50%;
float:left;
}
.front-page-container article:nth-child(even) {
width:50%;
float:right;
}
That should do it. Box sizing makes the divs width the calculation of width minus padding and borders. So no padding or bordering will add to the declared width. (I think thats the best way to explain it). The ::after pseudo-element clears any floats after the container.
As a bonus I will add that this article helped me immensily with this subject:
http://css-tricks.com/dont-overthink-it-grids/

Answer 2

You posted code works as expected. See http://jsfiddle.net/XqDn6/1/
The issue is most likely some margin/padding on the article elements causing the width of each element to exceed 50% and so not being able to fit 2 in a row..
One way to solve this problem is to use box-sizing: border-box which means that border/paddings are included in the width value.
.front-page-container article{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Demo with border/paddings and box-sizing: http://jsfiddle.net/XqDn6/2/

Answer 3

It works just fine for me: http://codepen.io/skimberk1/pen/6127d1c3a4961de1f9c1ef20d5400d0f.
I have no idea what could be going wrong in your case. Maybe some other CSS is affecting it?
Using the CSS box-sizing: border-box; might help, as it makes it so that the maximum width (including padding and border) is the width you defined (in this case 50%);

Answer 4

The problem is clear: both, as read in CSS schools,
No floating elements allowed on the left or the right side of a specified paragraph.
Here's an exampleo f how clear can be used: Understanding the CSS Clear Property.
Though float is an old solution used for stretching the container, as can be seen here: Clearing floats.
Solution: delete that if you can or edit the question for saying why its there (and cannot be taken off) so we can help you further.