• xcannabis

    (@xcannabis)


    I have a situation where I want to move the entire #content/#header/#footer over to the right.

    What do I change to get everything shifted to the very right side, and left a blank background on the left side. My content (middle part) is 888px, and it is currently centered in the middle. I just need to shift it over. Thanks!

    Here is my stylesheet:

    /***** general *****/
    body {
    margin:0px auto;
    font-size: 12px;
    font-family: Verdana, Arial, Helvetica, Sans-Serif;
    background: #4c4c4e;
    background-image: url(‘images/bg_xcan.jpg’);
    background-repeat: repeat;
    background-attachment: fixed;
    color:#000000;
    }
    img {
    border:0px;
    padding:5px;
    max-width: 100%; /* not working in IE6*/
    /*height: auto;*/ /* you can enable this.*/
    }
    a {color:#003399;text-decoration: none;}
    a:hover {color: #003300;text-decoration: none;}

    h1 {font-size:30px;}
    h2 {font-size:26px;}
    h3 {font-size:21px;}
    h4 {font-size:17px;}
    h5 {font-size:14px;}
    h6 {font-size:12px;}

    p {margin: 0px 0px 12px 0px;}
    hr {height:1px;border:none;border-top:1px dashed #73943B; width:90%;}
    del {color:red;}
    ins {color:green;}
    blockquote {
    clear: left;
    text-align: justify;
    padding: 0px 0px 0px 10px;
    margin: 20px 20px 10px 20px;
    border-left: 2px solid #73943B;
    }
    input,select,textarea {
    font-size:12px;
    font-family: Verdana, Arial, Helvetica, Sans-Serif;
    }
    code{
    font: 1.1em ‘Courier New’, Courier, Fixed;
    }

    .alignleft {float: left;}
    .alignright {float: right;}
    .aligncenter,div.aligncenter{
    display: block;
    margin-left: auto;
    margin-right: auto;
    }
    img.alignleft {
    padding: 5px;
    margin: 0 7px 2px 0;
    display: inline;
    }

    img.alignright {
    padding: 5px;
    margin: 0 0 2px 7px;
    display: inline;
    }
    img.centered {
    display: block;
    margin-left: auto;
    margin-right: auto;
    }
    .clear {clear:both;}
    .spacer {height:29px;}
    /***** layout *****/
    #base{
    width:888px;
    margin:0px auto;
    background: url(‘images/repeater.jpg’) repeat-y center;
    }
    #base2{
    width:888px;
    background: url(‘images/footer_xcan.jpg’) no-repeat center bottom;
    }
    #header{
    position:relative;
    width: 888px;
    height: 334px;
    background:url(‘images/header_xcan.jpg’) no-repeat center;
    }
    #container{
    position:relative;
    width:888px;
    overflow:hidden;
    background:url(‘images/container_bg.jpg’) no-repeat 0 0;
    }

    #content{ /*width=698px*/
    float:left;
    display:inline;
    overflow:hidden; /*when ie6, image’s with is > content width, hidden*/
    width:658px;
    min-height:614px; /*ie6 not support*/
    padding: 0px 15px 0px 25px;
    background:url(‘images/content_bg.jpg’) no-repeat 567px 0px;
    }
    #sidebar{ /*width=190px*/
    float:right;
    display:inline;
    overflow:hidden;
    width: 174px;
    margin:0 0 0 0;
    padding: 0px 8px 0px 8px;
    color:#ffffff;
    }
    #footer {
    clear:both;
    margin:0px;
    color: #ffffff;
    font-size: 11px;
    padding:35px 190px 14px 20px;
    }
    #footer a {color: #1589FF; font-weight:bold;}

    /***** header *****/
    #blogtitle {font-family: Arial,Verdana; position:absolute; width:80%; float:right; right:45px; top:90px; text-align:right; font-size:24px; color:#ffffff; font-weight:bold;}
    #blogtitle a, #blogtitle a:hover {font-family: Arial,Verdana; color:#ffffff; text-decoration:none;}
    #subtitle {font-family: Verdana,Arial; position:absolute; width:80%; float:right; right:45px; top:125px; text-align:right; font-size:13px; color:#90b349; font-weight:bold; font-style:italic;}

    #header ul {
    position: absolute;
    height: 22px;
    float:right;
    top: 21px;
    right: 57px;
    margin:0px;
    }
    #header ul li {
    display: inline;
    font-size: 13px;
    }

    #header ul li a {
    display: block;
    float: left;
    line-height: 22px;
    color: #ffffff;
    padding: 0 15px;
    text-decoration:none;
    }

    #header ul li a:hover, #header ul li.current_page_item a {
    background: #6c9025;
    }

    #header img.home {

    position: absolute;
    margin:0px;padding:0px;
    right: 15px;
    top: 19px;
    width:35px;
    height:35px;
    }

    /***** content *****/

    .archivetitle {
    color: #000000;
    font-size: 14px;
    font-variant: normal;
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 12px 0px;
    }
    .title, .title a {
    color: #000000;
    font-size: 20px;
    }

    .date {
    font-size: 10px;
    padding: 0px 0px 4px 0px;
    border-bottom: 1px solid #73943B;
    }

    .entry {
    color: #000000;
    line-height: 1.6em;
    text-align: justify;
    padding: 8px 0px 0px 0px;
    }
    .page_entry {
    margin: 10px 0px 0px 0px;
    padding: 2px 0px 20px 0px;
    border-top: 2px solid #73943B;
    border-bottom: 1px solid #73943B;
    }

    .info {
    line-height: 1.6em;
    font-size: 10px;
    text-align: left;
    margin: 0px 1px 50px 0px;
    padding: 4px 0px 1px 1px;
    border-top: 1px solid #73943B;
    }
    .category {
    font-size: 10px;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 4Px 20px;
    background: url(‘images/category.gif’) no-repeat top left transparent;
    }

    .tags {
    font-size: 10px;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 4px 20px;
    background: url(‘images/tags.gif’) no-repeat top left transparent;
    }

    .bubble {
    font-size: 12px;
    font-weight: bold;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 4px 20px;
    background: url(‘images/bubble.gif’) no-repeat top left transparent;
    }

    .navigation {
    font-size: 11px;
    margin: 40px 0px 0px 0px;
    padding: 2px 0px 17px 0px;
    border-top: 2px solid #73943B;
    border-bottom: 1px solid #73943B;
    }

    .sorry {
    font-size: 11px;
    font-style: italic;
    margin: 8px 0px 0px 0px;
    padding: 3px 0px 3px 0px;
    border-top: 1px solid #73943B;
    border-bottom: 1px solid #73943B;
    }
    #postmetadata {
    font-size: 12px;
    margin: 10px 0px 20px 0px;
    padding: 5px 15px 5px 15px;
    border-top: 1px solid #73943B;
    border-bottom: 2px solid #73943B;
    }

    /**** relative posts ****/
    .wp-relative{
    border-top: 2px dotted #3A6629;
    border-bottom: 2px dotted #3A6629;
    border-left: 2px dotted #3A6629;
    border-right: 2px dotted #3A6629;
    background:#B2D0B4;
    padding: 0px 5px 5px 6px;
    }

    .nocomments {background: none; color: #000000;}
    .commenttitle {
    color: #000000;
    font-size: 14px;
    text-align: left;
    font-weight: bold;
    margin: 0px 0 20px 0;
    padding: 2px 0px 2px 0px;
    font-variant: normal;
    border-bottom: 1px solid #80b608;
    }
    .commentlist {list-style: none;}
    .commentbody {
    color: #000000;
    font-size: 11px;
    position: relative;
    list-style-type: none;
    margin: 0px 0px 15px 0px;
    padding: 0px 0px 0px 0px;
    border-bottom: 1px solid #80b608;
    }

    .adminbody {
    color: #000000;
    font-size: 11px;
    position: relative;
    list-style-type: none;
    margin: 0px 0px 20px 25px;
    padding: 0px 0px 0px 0px;
    border-bottom: 1px solid #80b608;
    }
    .commenthead {
    color: #000000;
    padding: 5px 0px 8px 0px;
    margin: 0px 0px 10px 0px;
    border-bottom: 1px dotted #80b608;
    background:#ffffff;
    }

    .adminhead {
    color: #000000;
    margin: 0px 0px 10px 0px;
    padding: 5px 0px 8px 0px;
    border-bottom: 1px dotted #80b608;
    background:#ffffff;
    }

    .avatar {
    position:relative;
    float: left;
    margin: 0px 5px 0px 0px;
    padding: 0px;
    background: #ffffff;
    }
    .commentcount {
    float: right;
    color: #000000;
    font-size: 20px;
    font-weight: bold;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    font-family: Georgia, Times, ‘Times New Roman’, serif;
    }
    .authorlink {color: #000000; font-size: 11px; font-weight: bold;}
    .authorlink a {color: #000000; font-size: 11px; font-weight: bold;}
    .commentlink {font-size: 10px; color: #000000;}
    .trackhead {
    color: #000000;
    margin: 0px 0px 10px 0px;
    padding: 7px 0px 8px 41px;
    border-bottom: 1px dotted #80b608;
    background: url(images/track.jpg) no-repeat top left;
    }
    .trackbody {
    color: #000000;
    font-size: 11px;
    position: relative;
    list-style-type: none;
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 20px 0px;
    border-bottom: 1px solid #80b608;
    }
    .trackbody p a {color: #000000;}
    #commentform {
    margin:0;
    padding:20px 0 0 0;
    }
    #email, #author, #url {
    color: #000000;
    font-size: 12px;
    background: none;
    padding-left: 2px;
    vertical-align: middle;
    border: 1px solid #73943B;
    font-family: Verdana, Arial, Helvetica, Sans-Serif;
    }
    #comment {
    width: 400px;
    color: #000000;
    font-size: 12px;
    font-family: Verdana, Arial, Helvetica, Sans-Serif;
    border: 1px solid #80b608;
    padding: 2px 2px 2px 2px;
    }

    #submit {
    width: 80px;
    height: 20px;
    color: #000000;
    font-size: 12px;
    background: #ffffff;
    margin: 0px 0px 0px 0px;
    padding: 0px 10px 2px 10px;
    border: 1px solid #80b608;
    font-family: Verdana, Arial, Helvetica, Sans-Serif;
    }

    /***** search *****/
    #searchform{
    margin:0 0 15px 0;
    padding:0 0 0 0;
    }
    .searchbox {
    position:relative;
    margin:0 0 0 0;
    padding:0 0 0 0;
    width:170px;
    height:28px;
    }
    .search-field input {
    position:relative;
    float:left;
    top:8px;
    left:8px;
    width:117px;
    height:13px;
    font-family:Verdana;
    font-size:11px;
    font-weight:bold;
    color:#999999;
    padding:2px 3px 1px 3px;
    border:0px;
    background:#f0f0f0;
    }
    .search-but input {
    float:right;
    position:relative;
    top:5px;
    right:10px;
    width:25px;
    height:22px;
    }
    /***** sidebar *****/
    #sidebar a{color:#ffffff;}
    #sidebar a:hover {color:#73943B;}
    #sidebar ul {
    list-style-type: none;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    }
    #sidebar li {
    list-style-type: none;
    margin: 0px 0px 24px 0px;
    padding: 2px 0px 2px 0px;
    border-bottom: 1px dotted #73943B;
    }

    #sidebar ul ul li {
    color: #c8c8c8;
    line-height: 1.6em;
    list-style-type: none;
    font-size:12px;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 2px 13px;
    border:0px;
    background:url(‘images/titlearrow.gif’) no-repeat 0px 5px;
    }
    #sidebar ul ul ul li {
    font-size:12px;
    border:0px;
    margin: 0px 0px 0px 1px;
    padding: 0px 0px 0px 12px;
    line-height: 1.5em;
    background:url(‘images/arrow.gif’) no-repeat 0px 5px;
    color: #ffffff;
    }

    #sidebar h1 {
    color: #ffffff;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 0px;
    font-variant: normal;
    margin: 0px 0px 0px 0px;
    padding: 3px 20px 3px 0px;
    border-top: 3px solid #73943B;
    border-bottom: 1px solid #73943B;
    background:url(‘images/sidetitle.gif’) no-repeat right;
    }
    #sidebar select{
    margin:5px 0px 2px 2px;
    font-size:11px;
    width:170px;
    overflow:hidden;
    }

    /***** widget *****/
    #wp-calendar td {font-size:11px;}
    #wp-calendar td a {font-weight:bold;text-decoration:underline;}
    #wp-calendar {
    width: 174px;
    text-align: center;
    font-size:11px;
    border-bottom: 0px solid #73943B;}

    .wp-caption { /*images caption*/
    text-align: center;
    color:#666666;
    }

    .textwidget { /*text box*/
    margin:2px 0px 5px 2px;

    }
    .rsswidget img{
    display:none;
    }

    #akismetwrap{
    margin:2px 0 2px 25px;
    }

    #sidebar .widget_rss h1{
    background:url(‘images/rss.png’) no-repeat right;
    }
    .wp-smiley{
    vertical-align:middle;
    border:0px;
    padding:0px;
    }

    }

    .edit

    font-size:9px;

    }

Viewing 3 replies - 1 through 3 (of 3 total)
  • Micah Cooksey

    (@micahcooksey)

    The margin:0 auto; is what makes the content centered, so set it to margin:0; or margin:0 10px; and then insert float:right; for each element you want to float to the right. See if that works, and it is always nice if you can post a link so we can look at it.

    Thread Starter xcannabis

    (@xcannabis)

    Sorry, it’s http://xcannabis.com

    Thanks! I’ll try that!

    Thread Starter xcannabis

    (@xcannabis)

    That worked in IE6, and FF, but not IE7.

    My entire blog looks messed up in IE7.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘* positioning * Moving the entire #content/#header/#footer to the right’ is closed to new replies.