Even though I thought I had a grasp on the :after method for clearfixing in CSS, I'm having trouble getting it to work as expected. The siblingContainer that should be clearing after the buttonContainer with floated elements isn't behaving properly?
Here is the HTML:
<div class="buttonContainer">
<div class="action_button">Button 1</div>
<div class="action_button">Button 2</div>
</div>
<div class="siblingContainer"></div>
This is the CSS being used:
.action_button {
font-family: Arial;
font-size: 9pt;
font-weight: bold;
background-color: #f2c059;
color: white;
border-radius: 5px;
display: inline-block;
padding: 5px;
cursor: pointer;
}
.buttonContainer {
margin: 5px;
}
.buttonContainer div {
margin: 0 5px;
float: right;
}
.buttonContainer div:last-child:after {
content: "";
display: block;
clear: both;
}
.siblingContainer {
height: 500px;
background: gray;
}
Here's a link to the fiddle for reference: http://jsfiddle.net/np0c6feh/1/