Clearing floats using :after psudeo selector?

Question

So I'm trying to do floats and I need to use :after technique, but it won't work. I need to clear the floats after the red and blue box. I've tried everything. Here's my code:

<!doctype html>
<html>
<head>
  <title>Floats!</title>

  <style type="text/css">
    /* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */
    html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}

    /* apply a natural box layout model to all elements */


    *, *:before, *:after {
      -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
    }

@media only screen and (min-width: 768px){
    html, body {
        margin-top: 15%;
      background: #000000;
    }

    .wrapper {
      width: 90%;
      margin: 0 auto;
      padding: 1em;
      background: #3e3d3b;
      color: #fff;
    }

    .box {
      border-width: 4px;
      border-style: solid;
      height: 100px;
      margin-bottom: 1em;
    }

    .red {
      background: #ab331c;
      border-color: #6f2011;
      width: 32%;
      float: right;
      margin-right: 34%;

    }

    .box red:after{
      content: "."; 
      visibility: hidden; 
      display: block; 
      height: 0; 
      clear: both;
    }

    .blue {
      background: #4d6bb6;
      border-color: #243255;
      width: 66%;
    }

    .green {
      background: #6bbf85;
      border-color: #2c4e36;
      width: 32%;
      margin-left: 34%;
    }

    .purple {
      background: #9a74bb;
      border-color: #503d62;
      width: 32%;
      float:right;
      margin-top: -18%;
    }

    .orange {
      background: #c09344;
      border-color: #664e23;
      width: 32%;
      float:left;

    }

    .yellow {
      background: #f0e192;
      border-color: #726a44;
      height: 212px;
      float: right;
      width: 32%;
      margin-top: -17.5%;
    }

    .hotpink {
      background: #d15ecf;
      border-color: #612b60;
      width: 32%;
      float:left;

    }
}



  </style>
</head>
<body>

<div class="wrapper">
  <div class="box hotpink" id="red"></div>
  <div class="box red"></div>

  <!-- <div style="clear: both;"></div> -->

  <div class="box yellow"></div>
  <div class="box blue"></div>

  <!-- <div style="clear: both;"></div> -->

  <div class="box orange"></div> 
  <div class="box green"></div>
  <div class="box purple"></div>
</div>

</body>
</html>

The divs with "clear" works for me, but the :after pseudo selector does not. I don't know if I'm targeting the wrong element or what. So far I've tried (for the red box):

.box.red:after
.box:after
.red:after
.box .red:after
.box red:after

So far nothing has worked. Please help.

EDIT: Here's the http://jsfiddle.net/vQRRU/

http://stackoverflow.com/questions/211383/which-method-of-clearfix-is-best — rink.attendant.6, Oct 05 '13 at 17:21
Add a jsfiddle with the code that you've tried. Also, depending on what you're doing, simply adding `overflow: hidden` can clear elements. — Chris Herbert, Oct 05 '13 at 17:22
You're misinterpreting the use of `:after` in CSS. That selector isn't selecting anything that's already there after the element, it's creating something to put there. — Deryck, Oct 05 '13 at 17:42
@Deryck Yeah, I'm a little confused on the ':after' thing. So how do I make ':after' work like the divs in the html that clear the floats? — Addy, Oct 05 '13 at 17:45
@Deryck I want the blue box to sit under the red, hot pink and yellow boxes. It works with the div but not with the `:after`. I also want the orange, green and purple boxes to sit underneath the blue box also using `:after`. I want the same effects with `:after` as I would with the divs with `clear`. If that makes any sense. — Addy, Oct 05 '13 at 17:48

score 0 · Answer 1 · answered Oct 05 '13 at 17:59

0

Well you gotta adjust your widths and margins a little but just add clear: both; to .blue to accomplish that. If it's something like homework REQUIRING the use of :after and :before then I'll have to rethink it for a minute once I eat my burrito.

answered Oct 05 '13 at 17:59

Deryck

7,608
2
24
43

Yes, this is homework that does require the use of `:after` thank you very much for you help. – Addy Oct 07 '13 at 18:01

Clearing floats using :after psudeo selector?

1 Answers1