css pseudo-element appearing over top of content

Question

I am trying to create a three column design. The problem I encountered was that I need all columns to appear to be same height for display reasons so a simple float with clearfix would not do. My solve to this was to attempt to use the before and after pseudo-elements of the parent to imitate the background for the 1st and 3rd containers. This visually worked for the backgrounds but the absolutely positioned pseudo-elements are appearing above the floated content. Is there a way to prevent this? I have tried playing with z-index to no avail. JSfiddle: http://jsfiddle.net/jppower175/7USbS/1/

HTML

<div id="main-area" class="clearfix">
    <div id="sidebar">
        <ul id="side-nav">
            <li><a href="#">Title</a>
                <ul class="sub-menu">
                    <li><a href="#">Title</a></li>
                    <li><a href="#">Title</a></li>
                    <li><a href="#">Title</a></li>
                    <li><a href="#">Title</a></li>
                </ul>
            </li>
        </ul>
    </div>
    <div id="text-area">
        <p>blah blah</p>
    </div>
    <div id="right-bar">

    </div>
</div>

CSS

#main-area {
position: relative;
border: 2px solid #a06147;
background: #fcfef6;
height: 350px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
z-index: 0;
}

#main-area:before {
content: '';
position: absolute;
width: 20%;
height: 100%;
left: 0px;
top: 0px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
background: #cbdc99;
border-right: 5px solid #e3eed0;
z-index: 0;
}

#main-area:after {
content: '';
position: absolute;
width: 20%;
height: 100%;
right: 0px;
top: 0px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
background: #3c455b;
border-left: 5px solid #80a87e;
z-index: 1;
}

#sidebar {
position: reletive;
float: left;
min-height: 100px;
width:20%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 0px 5px 0px 0px;
border: 1px solid #000;
z-index: 50;
}

#text-area {
position: relative;
float: left;
padding: 1px 25px;
width:60%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

#right-bar {
position: relative;
float: left;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 0px 0px 0px 5px;
width:20%;
}

.clearfix:before,
.clearfix:after {
 content: " "; /* 1 */
display: table; /* 2 */
}

.clearfix:after {
clear: both;
}

Answer 1

you can set different z-index to pseudo and floatted element

For instance floatted element : do : position:relative;z-index:1;

for pseudo element or parent pseudo element add : z-index:0; or unset any z-index.

a quick fixe would be : pointer-events:none; on pseudos element, but not cross-browsers.

http://jsfiddle.net/7USbS/2/ You add a misspelled value: reletive instead of relative.