0

I have a 3 column structure: left_sidebar center_content right_sidebar I have a fixed header (navbar) and fixed sidebars. Now I want to make one div (the top one) in center_content also fixed.

<div class="container-fluid">
<div class="row-fluid">
<div class="span1">
    <div class="sidebar-nav sidebar-nav-fixed">
        <ul class="nav nav-list">
            <li class="nav-header">Sidebar</li>
            <li class="active"><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
        </ul>
    </div><!--/.well -->
<!--Sidebar content-->
</div>
<div class="span9">
    <div class="row-fluid well-white">
        <div class="span12">
            <div class="row-fluid">
                <div class="span12 content-header">
                    Fluid 12 content container and options panel<hr>
                </div>
            </div>
            <div class="row-fluid">
                <div class="span9">
                    Fluid 9 content header
                    <div class="row-fluid">
                        <div class="span6">Fluid 6 header division</div>
                        <div class="span6">Fluid 6 header division</div>
                    </div>
                    <div class="row-fluid">
                        <div class="span12">Fluid 12 real content here<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div>
                    </div>
                </div>
                <div class="span3">Fluid 3 sidebar for advertisment fixed as well when scrolling</div>
            </div>
        </div>
    </div>
<!--Body content-->
</div>
<div class="span2">
    <div class="sidebar-nav sidebar-nav-fixed">
        <ul class="nav nav-list">
            <li class="nav-header">Sidebar</li>
            <li class="active"><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
        </ul>
    </div><!--/.well -->
</div>    
</div>
</div>

there are two options how I want them to scroll

First, fix .row-fluid well-white and in this column, only scroll second row-fluid. ea I mean to fix .content-header as well.

The second is to make just .content-header to fix. (this option seems more realistic)

whenever I try to fix .content-header, it overrides other divs (like is on top of right sidebar and beneath the rows below him)

UPDATE To show what I'm talking about, you can view Google Plus Profile page, I guess I need to remake my code to use 3 column with 'affix' javascript component

UPDATE2 example:

---------------------------------
          fixed navbar
---------------------------------
| flsb | content options | frsb |
|      |-----------------|      |
|      |  content here   |      |
|      |                 |      |
|      |                 |      |
|      |                 |      |

flsb - fixed left sidebar (span2)

frsb - fixed right sidebar (span2)

content options - fixed (span8)

navbar - fixed (span12)

content here - scrollable ^_^ (span8)

Victor
  • 1
  • 5
  • So you want to fix the 2 sidebar menus and the advertisement? Did you try using the 'affix' class? – Carol Skelly Apr 06 '13 at 12:22
  • no no, the advertisment menu will be fixed also, but for know I'm trying to make a structure with 3 fixed column but the center column has scrollable content to be more concerete I want the same structure G+ is using for example on profile page :) – Victor Apr 06 '13 at 13:12
  • And did you try using 'affix' ? – Carol Skelly Apr 06 '13 at 13:27
  • yes, affix is not what I want affix is some navigation plugin, I want this for content, No? – Victor Apr 06 '13 at 13:46
  • okay now I've trying it and it has the same effect as just fixing the row – Victor Apr 06 '13 at 13:48
  • If you know html structure and are familiar with bootstrap, please let us continiue in chat, I need really a little, just a structure like G+ is using – Victor Apr 06 '13 at 13:49

0 Answers0