I'm having a serious issue getting my skin to work using css for the layout. I'm only using two panes (ContentPane and RightPane) that will be displayed side by side. The ContentPane will be about 66% of my #contentWrapper, and the RightPane the remaining 34%. Right now I have the width for both panes set to static sizes using px. The total width of the contentWrapper area is 800px and right now between the ContentPane and the RightPane i'm only using 794px of that area (because of the problems I've been having).
Unfortunately, for some reason I can't get the RightPane to line up next to the ContentPane. Currently the ContentPane is at right: 0 and top: 0 of the contentWrapper and the RightPane's top left corner is touching the ContentPane's bottom right corner. I've redone my coding multiple times and keep getting stuck in the same spot that i'm in right now. I was using tables for my layout but would prefer to use css for the layout. My code works if rendered outside of DNN so I know it isn't in the code but in something that DNN is (or isn't) doing. I don't have the page live online anywhere for you to see, but i'm posting my HTML and CSS code for the skin. Please help!!!
/* body styles
--------------------------*/
body
{
padding: 0;
border: 0;
margin: 0;
background-image: url();
}
/* Wrapper Styles
--------------------------*/
#wrapper
{
width: 800px;
margin: 0 auto;
border: 0;
padding: 0;
background-color: #ffffff;
}
#wrapper p
{
padding: 0;
border: 0;
margin: 0;
}
/* Header Styles
---------------------------*/
#headWrapper
{
height: 185px;
width: 100%;
padding: 0 0 0 0;
margin: 0;
border: 0;
background-color: Transparent;
}
#header
{
height: 150px;
width: 100%;
padding: 0;
margin: 0;
border: 0;
background-color: Transparent;
}
#nav
{
clear: both;
height: 35px;
width: 100%;
padding: 0 0 0 0;
margin: 0 0 0 0;
border: 0;
background-color: #6699cc;
vertical-align: middle;
}
#navContainer
{
width: 575px;
height: 22px;
float:left;
clear:both;
margin: 0;
padding: 0;
border: 0;
background-color: #6699cc;
}
#userContainer
{
height: 22px;
width: 220px;
float: right;
margin: 0;
padding: 0 5px 0 0;
border: 0;
background-color: #6699cc;
text-align: right;
}
/* Content Area Styles
----------------------------*/
#contentWrapper
{
clear: both;
padding: 0;
margin: 0;
width: 100%;
background-color: #ffffff;
height: 100%;
}
#ContentPane
{
float: left;
clear: both;
height: auto;
width: 570px;
padding: 0;
margin: 0;
border: 0;
background-color: Transparent;
}
#dnn_ContentPane
{
float: left;
clear: both;
height: auto;
width: 570px;
padding: 0;
margin: 0;
border: 0;
background-color: Transparent;
}
#RightPane
{
float: right;
clear: both;
height: auto;
width: 224px;
padding: 0;
margin: 0;
border: 0;
background-color: Transparent;
}
#dnn_RightPane
{
float: right;
clear: both;
height: auto;
width: 224px;
padding: 0;
margin: 0;
border: 0;
background-color: Transparent;
}
/* Footer Style
------------------------*/
#footer
{
position: absolute;
clear: both;
height: 33px;
width: 800px;
padding: 0;
margin: 0;
border: 0;
background-color: #6699cc;
}
#links
{
margin: auto;
padding: 0;
width: 100%;
height: 11px;
clear: both;
background-color: Transparent;
text-align: center;
}
#copyright
{
clear: both;
margin: 0 auto;
padding: 0;
width: 100%;
height: 11px;
background-color: Transparent;
text-align: center;
}
#terms
{
clear: both;
margin: 0 auto;
padding: 0;
width: 100%;
height: 11px;
background-color: Transparent;
text-align: center;
}
#footer p
{
color: #ffff33;
font-size: 9px;
font-family: Tahoma, Arial, Helvetica, Sans-Serif;
text-decoration: none;
padding: 0;
border: 0;
margin: 0;
}
#footer a:link, #footer a:visited
{
color: #003399;
text-decoration: none;
padding: 0;
margin: 0;
border: 0;
}
#footer a:hover
{
color: #003399;
text-decoration: underline;
padding: 0;
margin: 0;
border: 0;
}
/* Menu classes
-------------------------*/
.Main_DNNMenu_ContainerSub
{
background-color: #6699cc;
cursor: pointer;
cursor: hand;
padding: 1px 1px 1px 1px;
vertical-align: middle;
}
.Main_DNNMenu_NodeRoot
{
cursor: pointer;
cursor: hand;
color: #ffff33;
font-size: 17px;
font-weight: bold;
font-style: normal;
font-family: Tahoma, Arial, Helvetica;
background-color: Transparent;
white-space: nowrap;
margin: 0;
padding: 0px 5px 0px 5px;
}
.Main_DNNMenu_Node td
{
cursor: pointer;
cursor: hand;
color: #ffff33;
font-size: 12px;
font-weight: bold;
font-style: normal;
font-family: Tahoma, Arial, Helvetica;
background-color: Transparent;
white-space: nowrap;
padding: 1px 3px 3px 1px;
}
.Main_DNNMenu_NodeHover
{
background-color: #ff9900;
}
.Main_DNNMenu_NodeHover td
{
background-color: #ff9900;
}