How to properly clear these floated divs?

Question

I thought I understood the :after method of clearfixing with CSS - but I can't seem to get it to work properly. For some reason the siblingContainer that comes after the buttonContainer containing the floated elements doesn't seem to be clearing?

HTML:

<div class="buttonContainer">
    <div class="action_button">Button 1</div>
    <div class="action_button">Button 2</div>
</div>
<div class="siblingContainer"></div>

CSS:

.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;
}

fiddle: http://jsfiddle.net/np0c6feh/1/

score 1 · Accepted Answer · answered Aug 14 '15 at 15:44

1

Can also be done by clearing the parent dic rather than the child.

Instead of

.buttonContainer div:last-child:after {
  content: "";
  display: block;
  clear: both;
}

Use

.buttonContainer:after {
  content: "";
  display: block;
  clear: both;
}

http://jsfiddle.net/AgentStephens/np0c6feh/3/

answered Aug 14 '15 at 15:44

Matt Stephens

922
1
6
24

This is the same as mine, right? Okay, so you are adding clearfix to the last child! Nice. – Praveen Kumar Purushothaman Aug 14 '15 at 15:51
@PraveenKumar it is the same as your's now but it wasn't when i posted lol – Matt Stephens Aug 14 '15 at 15:54
Okay fine. Sure. `:)` – Praveen Kumar Purushothaman Aug 14 '15 at 15:54
This is what I was looking for, thanks! Also - I'm accepting this as the answer because while @PraveenKumar did post first his first answer wasn't what I was looking for and he changed it after this one was posted. – jessikwa Aug 14 '15 at 15:55
@jessikwa Yeah, that's fine. But I didn't copy. BTW. – Praveen Kumar Purushothaman Aug 14 '15 at 15:56
@PraveenKumar No worries - I'm just saying my reason since you pointed out they're the same. – jessikwa Aug 14 '15 at 15:57

How to properly clear these floated divs?

1 Answers1