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

Question

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;
}

Answer 1

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

Answer 2

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.

Answer 3

Use jQuery:

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

Answer 4

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 */
}