www.webdeveloper.com
Results 1 to 8 of 8

Thread: Help Moving Sidebar On The Other Side

  1. #1
    Join Date
    Apr 2005
    Posts
    91

    Help Moving Sidebar On The Other Side

    I've been working on a blog on Wordpress and I am using a template that I need modified. There are two sidebars one on the left and right of the content. What I want to do is have both side bars on the right, next to each other. How do I change this CSS to accomplish what I am asking?

    Code:
    /* <<<<<<<<<<<<<<<<<<<<<<<<<< Structural Layout >>>>>>>>>>>>>>>>>>>>>>>>>>>>> */
    body {
     background: #e6efff; /* #fff; */
     margin:  0;
     padding: 0;
     text-align: center; /* IE hack Part 1 */ 
    }
    
    
    /*---------------------------- Site Navigation -------------------------------*/
    #hnav { /*Top Section Header Full Width*/
     width: 950px; /*HD Hack*/ 
     margin: auto;
     height: 50px;
     border: none;
     background: #fff;
    }
    
    
    #header { /*Left Section of Header for Blog Title*/
     float: left;
     width: 235px;
     margin: 0px;
     padding: 0px;
     text-align: left;
     height: 20px;
    }
    
    
    #hmenu { /*Right Section of Header for navigation*/
     margin: 2px 5px 0 0;
     text-transform:lowercase;
     text-align: right;
     float: right;
     width: 440px;
    }
    
    
    #masthead { /*Masthead Image for Header*/
     background: url(images/commentheader.jpg) no-repeat center; /*HD Hack*/
     width: 950px; /*HD Hack*/
     height: 199px;
     margin: 0 auto;
     padding: 0;
     border: none;
    }
    
    
    /*------------------------------- Main Body ----------------------------------*/
    #container {
     width: 950px; /*HD Hack*/
     margin: auto;
     background: #fff; /* #f5f6f7; */
     /* border-left: 2px solid #466baf; */ /*HD Hack*/
     /* border-right: 2px solid #466baf; */ /*HD Hack*/
     font-family: Verdana,  Arial, Helvetica, sans-serif;
     font-size: .70em;
     text-align: left; /* IE hack Part 2 */
     /* border-top: 15px solid #540409; */
     /* border-bottom: 15px solid #540409; */
    }
    
    
    #topcontentdouble {
     float: left; /*HD Hack*/
     width: 498px; /*HD Hack*/
     height: 27px;
     /*background: #f5f6f7 url(images/header_whole2.gif) no-repeat right top;*/
     margin: 0 9px 0 9px;
     display: inline;
    }
    
    
    #topcontent { /*Add content on band above three columns*/
     width: 950px; /*HD Hack*/
     background: #f5f6f7 url(images/header_whole.gif) no-repeat top;
     margin: 9px auto 0 auto;
     height: 27px;
    }
    
    
    #content { /* Post middle content */
     float: left; /*HD Hack*/
     width: 500px;
     background: #ffffff;
     margin:  0 9px 0 9px;
     border-left: 2px solid #e5e5e5; 
     border-right: 2px solid #e5e5e5;
     display: inline;
    }
    
    
    #bottomcontentdouble {
     display: inline;
     float: left; /*HD Hack*/
     width: 500px; /*HD Hack*/
     /*background: #f5f6f7 url(images/bottom_whole2.gif) no-repeat -40px 0;*/
     margin: 0 9px 9px 9px;
     height: 27px;
    }
    
    #singlecontent {
     width: 730px;
     background: #ffffff;
     padding-top:0;
     margin:  0 auto;
    }
    
    
    .post {
     margin-top: 0px;
     margin-left: 10px;
     margin-right: 20px;
     margin-bottom: 80px;
    }
    
    .post a {
     color: #466baf;
     text-decoration: underline;
    }
    
    
    .post a:hover {
     font-weight: bold;
    }
    
    
    .post a:visited {
     color: #540409;
     text-decoration: underline;
    }
    
    .post h2 {
     color: #466baf;
     font-family: Arial, Helvetica, sans-serif;
     font-size: 1.8em;
     margin-bottom: 0px;
     margin-top: 40px;
     margin-left: 10px;
    }
    
    .singlepost {
     margin: 0px 105px 80px 105px;
    }
    
    
    #bottomcontent {
     width: 730px;
     background: #f5f6f7 url(images/bottom_whole.gif) no-repeat top;
     margin: 0px auto 0px auto;
     padding-bottom: 9px;
     height: 27px;
    }
    
    
    .meta {
     font-size: .9em;
     line-height: 18px;
    }
    
    
    .feedback {
     float: right;
     font-size: 1.0em;
     line-height: 35px;
    }
    
    
    .author {
     width: 200px;
     float: right;
     text-align: right;
    }
    
    
    /*---------------------------- Page Navigation -------------------------------*/
    .postnavigation {
     height: 45px;
    }
    
    
    .left {
     float: left;
     padding-left: 105px;
    }
    
    
    .right {
     float: right;
     padding-right: 105px; 
    }
    
    
    .leftdouble {
     float: left;
     padding-left: 10px;
    }
    
    
    .rightdouble {
     float: right;
     padding-right: 10px; 
    }
    
    
    /* ------------------------------ Sidebars -----------------------------------*/
    #sidebar2 { /* Third Column to right of content */
     position: relative;
     float: right;
     width: 200px;
     margin: 0 10px 0 0;
     font-family: Verdana, Arial, Helvetica, sans-serif;
     font-size: 1.0em;
     text-align: left; /* IE hack Part 2 */
     display: inline;
    }
    #sidebar {
     position: relative;
     float: left;
     width: 200px;
     margin: 0 0 0 10px;
     font-family: Verdana, Arial, Helvetica, sans-serif;
     font-size: 1.0em;
     text-align: left; /* IE hack Part 2 */
     display: inline;
    }
    
    
    #sidebar ul {
     position: relative;
    }
    
    #sidebar ul li {
     list-style-type: none;
     list-style-image: none;
    }
    
    #sidebar ul, #sidebar ul li {
     margin: 0;
     padding: 0;
     
    }
    
    #sidebar ul li ul{
    
     background: #fff;
     margin: 0 5px 0 0;
     padding: 10px 5PX 15px 5px;
    }
    
    #sidebar h2 {
     background: url(images/navgradient.jpg) repeat-x top;
     height: 16px;
     margin: 10px 5px 0 0px;
     padding:  8px 0 1px 5px;
     color: #8B9198;
     border-bottom: 1px solid #fff;
    }
    
    
    /*
    The following is the fix
    for 3-pixel-jog bug in IE 
    */
    /* Hide from IE5-mac. Only IE-win sees this. \*/
     
    * html #content {
     /*margin-right: 7px;*/
    }
     
    * html #sidebar {
     height: 1%;
    }
    /* End hide from IE5/mac */
    
    
    #sidebar2 ul li ul li{
     margin: 4px 10px 4px 10px;
     display: block;
     background: url(images/bullet.jpg) no-repeat;
     padding: 0 0 0 18px;
    
    }
    #sidebar ul li ul li{
     margin: 4px 10px 4px 10px;
     display: block;
     background: url(images/bullet.jpg) no-repeat;
     padding: 0 0 0 18px;
    
    }
    
    #sidebar ul li ul li a{
     display: block;
     height:1%; /* IE WIN */
    }
    
    
    #sidebar ul li ul li a:hover{
     background: #F0F0F0;
     text-decoration: none;
    }
    
    
    #sidebar ul li ul li ul {
     margin: 0;
     padding: 0;
    }
    
    #sidebar2 ul {
     position: relative;
    }
    
    #sidebar2 ul li {
     list-style-type: none;
     list-style-image: none;
    }
    
    #sidebar2 ul, #sidebar ul li {
     margin: 0;
     padding: 0;
     
    }
    
    #sidebar2 ul li ul{
    
     background: #fff;
     margin: 0 5px 0 0;
     padding: 10px 5PX 15px 5px;
    }
    
    #sidebar2 h2 {
     background: url(images/navgradient.jpg) repeat-x top;
     height: 16px;
     margin: 10px 5px 0 0px;
     padding:  8px 0 1px 5px;
     color: #8B9198;
     border-bottom: 1px solid #fff;
    }
    
    
    /*
    The following is the fix
    for 3-pixel-jog bug in IE 
    */
    /* Hide from IE5-mac. Only IE-win sees this. \*/
     
    * html #content {
     /*margin-right: 7px;*/
    }
     
    * html #sidebar2 {
     height: 1%;
    }
    /* End hide from IE5/mac */
    
    
    #sidebar2 ul li ul li{
     margin: 4px 10px 4px 10px;
     display: block;
     background: url(images/bullet.jpg) no-repeat;
     padding: 0 0 0 18px;
    
    }
    
    #sidebar2 ul li ul li a{
     display: block;
     height:1%; /* IE WIN */
    }
    
    
    #sidebar2 ul li ul li a:hover{
     background: #F0F0F0;
     text-decoration: none;
    }
    
    
    #sidebar2 ul li ul li ul {
     margin: 0;
     padding: 0;
    }

  2. #2
    Join Date
    Apr 2005
    Posts
    91
    Sorry had to enter the code in two posts.

    Code:
    /* ------------------------------ Comments -----------------------------------*/
    #response {
     margin: 0px 110px;
    }
    
    
    #commentlist {
     padding: 0px 10px 0px 10px;
     margin-left: 10px;
     margin-right: 10px;
     color: #7b7b7b;
     list-style-type: none; 
     text-align: justify;
    }
    
    
    #commentlist li  p{
     padding: 0px;
     margin: 8px 0px 0px 0px;
    }
    
    
    .commentname {
     width: 220px;
     float: left;
     font-size: 0.9em;
     margin: 0;
     padding: 0  0 2px 0;
    }
    
    
    .commentinfo{
     width: 250px;
     float: right;
     text-align: right;
    }
    
    
    .commenttext {
     clear: both;
     padding-top: 0px;
     margin-top: 0px;
     margin-bottom: 70px;
     border-top: 1px solid #e4ebef;
     text-align:left; 
     line-height:16px;
    }
    
    
    /* ----------------------------- Comment Form ------------------------------- */
    h2#postcomment {
     background: #FFFFFF url(images/comments.gif) no-repeat center top; 
     margin: 40px 0px 0px 0px;
     padding: 0 0 20px 10px;
    }
    
    
    #commentform {
     background: #f5f6f7; 
     padding: 1px 20px;
     margin-top: 0px;
     margin-bottom: 0px;
    }
    
    
    #commentboxes {
     width: 200px;
     float: left;
     color: #7b7b7b;
     font-size: 0.9em;
    }
    
    
    p.instructions {
     margin: 14px 0 0 200px;
     color: #7b7b7b;
     font-size: 0.9em;
     text-align: justify;
     border-left-width: 1px;
     border-left-style: solid;
     border-left-color: #d5d7db;
     padding-left: 15px;
     position: relative;
    }
    
    
    #inputbox {
     clear: both;
     color: #7b7b7b;
     font-size: 0.9em;
    }
    
    
    #button{
     padding-top: 0.5em;
    }
    
    
    #commentsbottom {
     background: #FFFFFF url(images/commentsdown.gif) no-repeat center top; 
     margin: 0;
     padding: 0;
     height: 22px;
    }
    
    
    /* --------------------------- 'Sidebar' Structure -------------------------- */
    #menu {
     width: 950px;
     height: 45px;
     background: #F0F0F0 url(images/bottomgradient.jpg) repeat-x top;
     border-top: 1px solid #d1d4d9;
     border-right: 1px solid #d5d7db;
     border-bottom: 2px solid #d5d7db;
     border-left: 1px solid #d1d4d9;
    }
    
    
    #searchform {
     float: left;
     margin-top: 12px;
     padding-left: 20px;
    }
    
    
    #topimage {
     margin: 2px 0 0 0; 
     cursor: pointer;
     width: 60px;
     height: 40px;
     background: url(images/topbutton.gif) no-repeat top;
     float: right;
     padding-right: 9px;
     padding-top: 3px;
    }
    
    
    #topimage a{
     display:block;
     height:100%;
     overflow:hidden;
     text-decoration:none;
    }
    
    
    /* ------------------------------- Credits ---------------------------------- */
    #footer {
     margin: 10px auto;
     width: 950px;
     font-size: .8em;
    }
    
    
    #footer p {
     margin-top: 0;
    }
    
    
    .clearer {
     clear: both;
     line-height: 0px;
    }
    
    
    /*------------------------------ H Menu Styling ----------------------------- */
    #top { 
     display: inline;
     list-style-type: none;
    }
    
    
    #hnav ul li{
     display: inline;
    }
    
    
    #hnav ul li a {
     color: #919191;
     text-decoration: none;
     padding: 5px 0px 5px 30px;
     font-size: 0.7em;
     font-family: Arial, Verdana, Helvetica, sans-serif;
     font-weight: normal;
    }
    
    
    #hnav ul li a:hover {
     color: #bfbfbf;
    }
    
    
    
    /* <<<<<<<<<<<<<<<<<<<<<<<<<<<<< Typography >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */
    /* ------------------------------- General ---------------------------------- */
    a {
     color: #540509;
     text-decoration: none;
    }
    
    
    a:hover {
     color: #990000;
     text-decoration: underline;
    }
    
    
    top a {
     border: 0;
     text-decoration: none;
    }
    
    
    blockquote {
     background: #f5f6f7;
     padding: 10px 20px;
    }
    
    
    code {
     font-family: Arial, Verdana, Helvetica, sans-serif;
     font-size: 1.0em;
    }
    
    
    h1 a {
     margin: 0;
     padding: 0;
     text-decoration: none;
     color: #6f6f6f;
    }
    
    
    h2 {
     color: #466baf;
     font-family: Arial, Helvetica, sans-serif;
     font-size: 1.1em;
     margin-bottom: 0px;
     margin-top: 40px;
     margin-left: 10px;
    }
    
    
    .singlepost h2{
     color: #466baf;
     font-family: Arial, Helvetica, sans-serif;
     font-size: 1.8em;
     margin-bottom: 0px;
     margin-left: 10px;
    }
    
    
    h3 {
     text-align: left;
     color: #005D93;
     margin: 0;
     margin-top: 3px;
     padding: 0;
     font-size: 0.9em;
     line-height: 26px;
     font-weight: normal;
    }
    
    
    /* ------------------------------Site Navigation ---------------------------- */
    #blogtitle {
     margin: 0;
     padding: 5px;
     font-family: Arial, Helvetica, sans-serif;
     font-weight: normal;
     font-size: 0.7em;
    }
    
    
    #blogtitle a{
     font-weight: bold;
    }
    
    
    #blogtitle a:hover{
     color: #bfbfbf;
     font-weight: bold;
     text-decoration: none;
    }
    
    
    /* -------------------------------- Main Body ------------------------------- */
    .post, .singlepost{
    color: #3f3f3f;
     text-align: left;
    
    }
    
    
    .posted {
     color: #555555;
    }
    
    
    .title a  {
     text-align: left;
     height: 20px;
     color: #444444;
     display: block;
     text-decoration: none;
     font-size: 1.6em;
     padding-top: 8px;
    
    }
    
    
    .title a:hover {
     color: #005D93;
    }
    
    
    .storycontent {
     border-bottom: 1px solid #BBBBBB;
     padding: 0px 0px 5px 0px;
     font: 1.1em Arial, Helvetica, sans-serif;
     line-height: 18px;
    }
    
    .singlepost p {
     margin-top: 0;
    }
    
    .singlepages p {
     color: #3f3f3f;
     text-align: left;
     margin: 0px 105px 80px 105px;
     line-height: 20px;
     font: 1.2em Arial, Helvetica, sans-serif;
    }
    
    
    .storycontent a {
     color: #466baf;
     text-decoration: underline;
    }
    
    
    .storycontent a:hover {
     font-weight: bold;
    }
    
    
    .storycontent a:visited {
     color: #540409;
     text-decoration: underline;
    }
    
    
    /* ----------------------------- Page Navigation ---------------------------- */
    .left a{
     color: #990000;
     font-size: 0.9em;
    }
    
    
    .right a{
     font-size: 0.9em;
     color: #990000;
    }
    
    
    .leftdouble a{
     color: #990000;
     font-size: 0.9em;
    }
    
    
    .rightdouble a{
     font-size: 0.9em;
     color: #990000;
    }
    
    
    /* -------------------------------- Comments ------------------------------- */
    .commentauthor {
     font-weight: bold;
     font-size: 1.2em;
     padding: 0 0 2px 0;
     margin: 0;
     color: #000000;
    }
    
    
    .commentauthor a{
     font-weight: bold;
     margin: 0;
     padding: 0 20px 0 0;
     background: url(images/bullet.jpg) no-repeat top right;
    }
    
    
    .commentdate {
     font-size: 0.8em;
     text-align: right;
     line-height: 18px;
     padding: 0;
     margin: 0;
    }
    
    
    #nocomment, #commentsclosed {
     text-align: center;
     color: #7b7b7b;
     font-size: 1.1em;
    }
    
    
    /* ------------------------------ Comments Form ----------------------------- */
    #comment  {
     width: 465px;
    }
    
    
    #comment, #author, #url, #email, #press{
     background: #e7e9ed;
     font-family: Arial, Helvetica, sans-serif;
     font-size: 1.1em;
     color: #7b7b7b;
     padding: 1px 2px 1px 1px;
    }
    
    
    #comment, #author, #url, #email{
     border: 1px solid #d5d7db;
    }
    
    
    #comment:hover, #author:hover, #url:hover, #email:hover{
     border: 1px solid #7b7b7b;
    }
    
    
    #comment:focus, #author:focus, #url:focus, #email:focus{
     background: #FFFFFF;
     border: 1px solid #000000;
     color: #7b7b7b;
     padding: 1px 2px 1px 1px;
    }
    
    
    #commentboxes p {
     margin: 0;
     padding-bottom: 0.9em;
    }
    
    
    h2#comments{
     margin-bottom:40px;
    }
    
    
    p.feeds {
     float: right;
     margin-top: -1.8em;
     font-size: 0.9em;
    }
    
    
    p.feeds a, p.feeds a:hover  {
     text-decoration: none;
    }
    
    
    p.feeds a:hover {
     color: #000000;
    }
    
    
    #inputbox {
     clear: both;
     color: #7b7b7b;
     font-size: 0.9em;
    }
    
    
    #inputbox a {
     color: #7b7b7b;
    }
    
    
    #inputbox a:hover {
     color: #FFFFFF;
    }
    
    
    p.inputbox {
     margin: 0;
     padding-bottom: 10px;
    }
    
    
    p.pages {
     margin: 0;
     padding: 40px 40px;
     padding-top: 0;
     text-align: center;
    }
    
    
    p.pages a {
     color: #005D93;
    }
    
    
    /* -------------------------------- Credits --------------------------------- */
    p.credits {
     padding: 0px 0px;
     text-align: center;
     margin: 10px 0px; 
     color: #9e9e9e;
     font-family: Arial, Helvetica, sans-serif;
     font-size: 0.8em;
    }
    
    
    p.wordpress {
     margin: 0;
     padding: 0;
     border-bottom-width: 1px;
     border-bottom-style: solid;
     border-bottom-color: #d5d7db;
    }
    
    
    /* --------------- Search/Archives/Categories Results Pages ------------------*/
    .searchresult {
     padding: 30px 0 0 0;
     margin:0;
    }
    
    
    .searchresult a{
     color: #000000; 
    }
    
    
    .searchinfo {
     font-size: .9em;
     line-height: 18px;
     padding: 0 0 2px 0;
     color: #000000;
     margin: 0 ;
    }
    
    
    .searchdetails {
     font-size: .9em;
     line-height: 18px;
     padding: 0 0 2px 0;
     color: #000000;
     margin: 0 ;
     border-bottom: 1px solid #BBBBBB;
    }
    
    
    /*--------------------------- 'Comment Edit' Buttons ------------------------ */
    #ed_toolbar {
     background: #d5d7db; 
     border: 1px solid #d5d7db;
     padding-left: 5px;
    }
    
    
    #ed_bold {
     background: url(images/bold.gif) no-repeat top;
     height: 22px;
     width: 22px;
     border: 0px none;
    }
    
    
    #ed_italic {
     background: url(images/italic.gif) no-repeat top;
     height: 22px;
     width: 22px;
     border: 0px none;
     margin-left: 5px;
    }
    
    
    #ed_link {
     background: url(images/link.gif) no-repeat top;
     height: 22px;
     width: 22px;
     border: 0px none;
     margin-left: 5px;
    }
    
    
    #ed_close{
     background: url(images/close.gif) no-repeat top;
     height: 22px;
     width: 22px;
     border: 0px none;
     margin-left: 25px;
    }
    
    /* 
    This piece of code is for clearing
    the floats without structural markup
    Don't modify it
    */
    .clearfix:after {
     content: "."; 
     display: block; 
     height: 0; 
     clear: both; 
     visibility: hidden;
    }
    
    .clearfix {
     display: inline-table;
    }
    
    /* Hides from IE-mac \*/
    * html .clearfix {
     height: 1%;
    }
    .clearfix {
     display: block;
    }
    /* End hide from IE-mac */
    .alt {
            background-color: #f8f8f8;
            background-color: #ced7e8;
            border-top: 1px solid #5f0409;
            border-bottom: 1px solid #5f0409;
            }
    .notice {
           color: #05ac58;
           color: #5f0409;
           font-size: 1.2em;
           font-weight: bold;
            }
    .notice2 {
            color: #5f0409;
            font-weight: bold;
             }
    #wp-calendar a{
       background-color: #B2C9F5;
    {

  3. #3
    Join Date
    Dec 2002
    Location
    Manchester, UK
    Posts
    6,276
    Got a link?
    Every fight is a food fight when you’re a cannibal.

  4. #4
    Join Date
    Apr 2005
    Posts
    91
    Here is the link to the site.

    http://rezzlineblog.com

  5. #5
    Join Date
    Nov 2005
    Posts
    46
    Hi MontyV,

    If i not mistaken, placement of the side bars is to be done on HTML portion but not CSS.

    Try allocate the side bar HTML portion and made appropriate move

    Kiat Hau
    http://webidiot.blogspot.com

  6. #6
    Join Date
    Dec 2002
    Location
    Manchester, UK
    Posts
    6,276
    The left side-bar can be moved to the right hand side by making the following alteration in the CSS:
    Code:
    #sidebar {
     position: relative;
     float: right;
     width: 200px;
     margin: 0 0 0 10px;
     font-family: Verdana, Arial, Helvetica, sans-serif;
     font-size: 1.0em;
     text-align: left; /* IE hack Part 2 */
     display: inline;
    }
    However, that will put it on the very far right opf the page (ie: to the right of the other sidebar). If you want it to be on the left of the right hand sidebar then you will have to move <div id="sidebar"></div> (and all of it's contents) to after <div id="sidebar2"></div> in sidebar.php.
    Every fight is a food fight when you’re a cannibal.

  7. #7
    Join Date
    Apr 2005
    Posts
    91
    David

    with some modification of what you put I was able to get it moved. Thank you.

  8. #8
    Join Date
    Dec 2002
    Location
    Manchester, UK
    Posts
    6,276
    Happy to help.
    Every fight is a food fight when you’re a cannibal.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles