Hi, happy easter or easter bunny day to all.
I am working on learning how to create wp pages.& even bought the sitepoint create your own wicked theme book.
but this is where I am at.
my initial php/html/css layout (number 2 in the image) is working out ok. but wp (number 1, on top in the image) is not.

I was able to add a second side bar & second menu to the wp theme.
but wp doesn't recongize the size settings making the second menu on the left hand side about 5px wide rather than 20% and the css ribbon style on the right hand side also doesn't display.

was wondering how this was & how I can go about fixing it?
and below is the rather simple css...And actually as I look at it am thinking i need a second nav css rule for the left hand side bar...betcha that is it...

Code:
#clear{
clear:both;
margin:0;
padding:0;
}

#wrap{
width:100%;
height:100%;
//border: 3px solid #000;
margin:0px auto;

}
#core{
float:left;
width:65%;
min-height:780px;
padding:0px;
margin:0px;
border-right: 1px solid #000;
}
#header{
width:100%;
height:200px;
float:left;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
background-color:#000;
text-transform:uppercase;
}
#header h1{
display:block;
margin:0px 0px 0px 700px;
padding:0px 0px 0px 10px;
color:#fff;
border-left: 1px solid #fff;
width:300px;
line-height:200px;
}

#container{
float:right;
width:75%;
//border: 5px solid #000;
//background-color: #4C1F00;
}

#mainBody{
float:left;
width:90%;
height:auto;
margin:0px 0px 10px 10px;
padding:0px 0px 10px 0px;
text-align:justify;
border-bottom: 1px solid #000;
//background-color: #4C1F00;
}
#secondaryText{
float:left;
width:90%;
height:auto;
margin:0px 0px 10px 10px;
padding:0px 0px 10px 0px;
text-align:justify;
border-bottom: 1px solid #000;
//background-color: #4C1F00;
}

#sideBar01{
float:right;
width:25%;
min-height:780px;
margin:0px 10px 0px 0px;
padding:0px 10px;
border-left: 3px solid #000;

}

#sideBar02{
float:left;
width:20%;
min-height:600px;
//margin:0px 10px 0px 0px;
//padding:0px 10px;
border-left: 3px solid #000;
}
.widget{
margin: 10px 0px 5px 10px;
border: 2px solid #000;
font-size:14px;
 }
 
.widget h4, h5{
margin:0;
padding:0;
}

#footer{
width:100%;
height:30px;
color:#fff;
background-color: #4c4c33;
border-top: 2px solid #000;

}
/*  ************* navigation **************** */
nav {
margin:0 0 0 -50px;
text-transform:uppercase;
}
nav ul {list-style: none;}

nav ul li a{
display: block;
padding: 10px 10px 10px 20px;
color: #fff;
font-size:16px;
text-decoration:none;
background-color:#ccc;
margin: 0 0 5px 0 ;
line-height:25px;
position:relative;
border-top: 2px solid #666600;
border-bottom: 2px solid #666600;
}

nav ul li a span{
position: absolute;
right: 100%;
top: 10px;
width:50px;
height: 100%;
background-color:#ddd;
border-top: 2px solid #666600;
border-bottom: 2px solid #666600;
border-left:2px solid #666600;
background-image:url(./images/shadowPng.png);
background-position:top right;
background-repeat: repeat-y;
}

nav ul li a span::before{
position: absolute;
right: 100%;
top: 10px;
width: 0; 
height: 0; 
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #fff;
}
nav ul li:nth-child(2) a, nav ul li:nth-child(2) a span {background-color:#520000;}
nav ul li:nth-child(3) a, nav ul li:nth-child(3) a span {background-color:#661400;}
nav ul li:nth-child(4) a, nav ul li:nth-child(4) a span {background-color:#000;}
nav ul li:nth-child(5) a, nav ul li:nth-child(5) a span {background-color:#333;}
/*  ************* text **************** */
h3{
display:inline-block;
width:175px;
margin:0 20px 0px 0px;
border-right: solid 2px #000;
color:#fff;
}
wpDiff01.jpg