How can I "position: fixed" a div properly?

If you'll take a look at my site http://www.metroflatsmiami.com/listing.html, you'll see that I have a floating DIV on the right, but the thing is it's set off the left side. If you resize your window (or have a different resolution), it won't look right. I want it to always be just to the right of the main content DIV, but still scrolling... any thoughts?

The CSS:

.floating_price_box {
  开发者_运维百科  position:fixed;
    width: 200px;
    border: solid 1px black;
    height: 400px;
    top: 50px;
    left: 1000px;
}

---

Use jQuery:

$(window).bind("load resize", function(){
   $('.right-block').width($('.main-block').width() - (25));
});

---

Yeah....why not do right: 50px instead of left: 1000px?

---

If you set the floating_price_box div to have a left value of 75%, it will scale with the page size. It breaks when the browser window gets too small, but the window has to be pretty small for that.

.floating_price_box {
    position:fixed;
    width: 200px;
    border: solid 1px black;
    height: 400px;
    top: 50px;
    left: 75%;
}

In order to make the sidebar 25px to the right of the main content, you could also do something like this. Add an inner div to your floating price box:

<div id='home_search_container'>
     ...content...
</div>

<div class="floating_price_box">
    <div class="floating_price_box_inner">
        Nightly Rate: $90 - $130 (<a href="#">Instant Quote</a>)<br/>
    </div>
</div>

And here's your CSS:

#main {
     float: left;
     margin-right: 25px;
     width: 700px;
}

.floating_price_box {
    float: left;
    width: 200px;
}

floating_price_box_inner {
     border: solid 1px black;
    height: 400px;
    position: fixed;
     top: 50px;
}

Basically all this second method does is float the outside boxes to the correct position. Then the inner div is styled to fix the box vertically where you want it.

---

The simplest way is to position it like the main content and then use margin to shift it to the side:

.floating_price_box {
    position:fixed;
    width: 200px;
    border: solid 1px black;
    height: 400px;
    top: 50px;
    /*left: 1000px;*/
    margin-left : 700px;  /* main column width */
}