twitter bootstrap scrolling side bar

Question

I am trying to add the twitter bootstrap framework to my django project and I am a little stuck. I want to create webpage not unlike google maps.

In the image below I want to have a fixed header, green (please ignore the google specific content, for me it is only a navbar), the rest of page size dominated by the map, yellow, and in the sidebar two google ads (or any ads really) top and bottom (blue) Most of that is easy, however problems arise when I want to have a scrollbar on the right and have the content be more than the page allows (and thus affecting scrolling) Has any one ever done this or have a working example? I don't know if I should or should not be using the sidebar class, also I think it is more left centic in operation and has to be fiddled with to operate on the right

EDIT:

It looks like I don't have enough reputation points to post an image, it can be found here:

http://www.flickr.com/photos/douglaskastle/6996262105/sizes/l/in/photostream/

I have to admit I haven't tried much, I am a total n00b to bootstrap, I know what I want, but examples like what I want aren't readily available. My closest implementation is what I described without the blue google maps bits, I can't make the red information scrollable, it just runs off the page — Douglas Kastle, Mar 19 '12 at 13:12
Is this a fixed layout? As in, contained inside a fixed width container? or is it fluid, just like google maps? i.e. it stretches to the available width of your screen. — Andres I Perez, Mar 19 '12 at 13:22
I was hoping to get the former to work before moving onto to the latter, in fact I would like the google map to be a function of the width and height of the browser window — Douglas Kastle, Mar 19 '12 at 17:12

score 0 · Accepted Answer · edited May 23 '17 at 11:56

I realised that this is the solution to my question just I looked at it the wrong way:

Fixed sidebar navigation in fluid twitter bootstrap 2.0

I missed it the first time because I wanted my content/map to be static and the sidebar to scroll. I just added to the html template:

<style type="text/css">
.map-fixed {
    padding: 9x 0;
    position: fixed;
    width : 510;
}
</style>

so in the body of my template I was able to fix the map instead of the sidebar

<div class="container">
  <div class="row">
    <div class="span12">
        <div class="row">
            <div class="span7 map-fixed">
                {{ form.map }}
            </div> 

            <div class="span5 offset7">
                <div>{{ string|safe }}</div>
            </div>  
        </div>  
    </div>  
  </div>  
</div>

I don't believe you need a row within a row here. You could remove the first .row and .span12 — Chris Nolet, Jun 14 '12 at 02:03

twitter bootstrap scrolling side bar

1 Answers1