CSS: How to create colsgroup like semantic-ui way

Question

the jsbin is here: http://jsbin.com/uMEjOV/1/edit

Hi, in semantic UI, (http://semantic-ui.com) we could create:

<div class="ui three column grid">
    <div class="column">1</div>
    <div class="column">2</div>
    <div class="column">3</div>
</div>

i try to create my own without semantic-ui famework:

<div class="colsgroup">
    <div class="column">col 1</div>
    <div class="column">col 2</div>
    <div class="column">col 3</div>

    <!-- but i need extra class="close" to make it work -->
    <div class="close"></div>
</div>

I want clear model just like semantic-ui way. Yes, i want to remove <div class="close"></div> (the style of .close is float: none; clear: both;)

How to do it to be as clear as semantic-ui way?

Answer 1

You can use :after pseudo-element instead of redundant div.close

CSS:

.colsgroup:after {
  content:'';
  display:block;
  float: none;
  clear: both;
}

HTML:

  <div class="colsgroup" id="sample">
    <div class="column">col 1</div>
    <div class="column">col 2</div>
    <div class="column">col 3</div>
    <!-- no redundant div.close here -->
  </div>

Live demo: http://jsbin.com/uMEjOV/5/edit

CSS pseudo-elements are really useful in cases where you need to reduce amount of additional decorative/helper elements, making HTML markup lighter. You can read more about them here: http://www.w3.org/TR/CSS2/selector.html#before-and-after