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/