Question

* Thanks everyone for checking on this. It appears I had a separate template file for the index page and I forgot to edit it. I feel dumb having worked on this for 2 hours!. Sorry for wasting your time.*

I am trying to get the div id="right-sidebar" to align to the right of the page, while the div id="right-main" to fill the remaining space to the left. The div id="right-main" is aligning just fine and filling the space, but the right-sidebar is nowhere to be found. Can anyone figure out what I’m doing wrong here to get the right sidebar to show up to the right of div id="right-main"?

Here is my html:

<div id="page-wrap"align="center">
  <div class="main" align="center">
    <div id="header" align="left"></div>
    <div id="subheader" align="bottom"></div>
    <div id="right-sidebar"></div>
    <div id="right-main"></div>
    <div id="footer"></div>

  </div>

</div>

Here is my CSS:

#page-wrap {
    padding:10px 10px 10px 10px;
    background:#FFFFFF;
}

.main {
    /*min-width: 780px;*/
    max-width: 1260px;
    position: relative;
    text-align:left;
    padding:10px 10px 10px 10px;
    border:1px solid #777777;

    /* Gradient background */
    background:#FFF;
    background: -moz-linear-gradient(top, #5e99d4, #c4d7ea);
    background: -webkit-gradient(linear, 0% 0%, 0% 75%, from(#5e99d4), to(#c4d7ea));

    /* Rounded Corners */
    -moz-border-radius: 5px 5px 5px 5px;
    -webkit-border-radius: 5px 5px 5px 5px;
    border-radius: 5px 5px 5px 5px;
}


#header {
    padding:10px 20px 10px 10px;
    width: 90%;
    }

#sitepic {
    height: 80px;
    margin: 0 auto;
    padding: 5px;
    float: left; 
}
#p

#subheader {
    margin-left: 10px;
    margin-top: 20px;
    padding: 0px 10px 0px 10px;
    }

#wrapper {

}

#right-sidebar {
    float: right;
    width: 200px;
    min-height: 300px;
    background: #CCCCCC;
    text-align:left;
    padding:10px 5px 10px 5px;
    border:1px solid #777777;
    /* Rounded Corners */
    -moz-border-radius: 5px 5px 5px 5px;
    -webkit-border-radius: 5px 5px 5px 5px;
    border-radius: 5px 5px 5px 5px;
}

#right-main {
    height: auto;
    min-height: 300px;
    margin-right: 210px;
    background: #FFFFFF;
    text-align:left;
    padding:10px 5px 10px 5px;
    border:1px solid #777777;
    /* Rounded Corners */
    -moz-border-radius: 5px 5px 5px 5px;
    -webkit-border-radius: 5px 5px 5px 5px;
    border-radius: 5px 5px 5px 5px;
    }

#footer {
    height: auto;
    margin-top: 10px;
    min-height: 40px;
    background: #5e99d4;
    position: relative;
    text-align:left;
    padding:10px 5px 10px 5px;
    border:1px solid #777777;
    /* Rounded Corners */
    -moz-border-radius: 5px 5px 5px 5px;
    -webkit-border-radius: 5px 5px 5px 5px;
    border-radius: 5px 5px 5px 5px;
    }

Answer 1

right-sidebar appears to work correctly for me from jsFiddle using Chrome and IE8. What browser are you viewing this in?