Troubles with positioning

Question

I'm migrating from 960 grid to Twitter Bootstrap, which indeed is a headache. Right know I'm manipulating the ground structure (Base.html, using Django), but the output isn't at all what I want it to be. How can I accomplish what I want?

Here's the html:

<div id="container">
    <header id='header'>
        <!--Header content-->
    </header>
    <div id='main_container' class='row-fluid'>
        <div id="main" role="main" class="span12">
            <div id='main_content' class="span9">
                <!--Main content-->
            </div>
            <div id='side_bar' class="span3">
                <!--Sidebar container-->
            </div>
        </div>
    </div>
</div>

Output:

 __________________________________
|                                  |
|             header               |
|__________________________________|
|                      |           |
|     main             |   side    |
|     content          |   bar     |
|                      |           |
|                      |           |
|                      |           |
|    <-------- main div ------->   |
|                      |           |
___________________________________

Desired output:

 __________________________________
|                                  |
|             header               |
|__________________________________|
|#####|               |      |#####|
|#####|   main        | side |#####|
| body|   content     | bar  | body|
| BG  |               |      | BG  |
|#####|               |      |#####|
|#####|               |      |#####|
|#####|   <--- main div ---> |#####|
|#####|               |      |#####|
___________________________________

Note:

I've tried to change span12 in <div id="main" role="main" class="span12"> to span9. Then it works, except that everything main div with it's content gets left aligned). This however can't be the right way of doing it, because that means that the divs inside the main div together will be 12 (span9 + span3), even though the main div is 9.

Note 2: The "#####" is the body's background image, which means the main div should be centered and fill ~60% of the page horizontally.

Miljan Puzović · Answer 1 · 2013-04-08T18:38:58.367

After sum of sibling divs with .span classes get result 12 (i.e. 12 = span9 + span3) you must set new div with .row-fluid class and then put other divs with .span classes inside of it. See Twitter Bootstrap docs (fluid nesting).

<div id='main_container' class='row-fluid'>
    <div id="main" role="main" class="span12">
        <div class="row-fluid">
           <div id='main_content' class="span9">
               <!--Main Container-->
           </div>
           <div id='side_bar' class="span3">
               <!--Sidebar Container-->
           </div>
        </div>
    </div>
</div>

EDIT: If you need to set offset to get desired result, try this

<div id='main_container' class='row-fluid'>
    <div id="main" role="main" class="span12">
        <div class="row-fluid">
           <div class="span2">
               <!-- empty -->
           </div>
           <div id='main_content' class="span6">
               <!--Main Container-->
           </div>
           <div id='side_bar' class="span2">
               <!--Sidebar Container-->
           </div>
           <div class="span2">
               <!-- empty -->
           </div>
        </div>
    </div>
</div>

http://jsfiddle.net/DSNnT/

Or you can use offset classes.

Thanks a lot for your answer! I realize now that I wasn't clear enough. The main div should not fill the whole page horizontally. The "#####" is meant to be the body's background image. With the solution you provided I get the desired structure, except that the main div is filling the whole page. Is there a way of compress the main div horizontally and still keep the structure? — holyredbeard, Apr 08 '13 at 18:45

score 1 · Answer 2 · answered Apr 08 '13 at 18:41

I think you want to put the #main_container 'row-fluid' inside a 'container' like this:

<div class="container">
  <div id='main_container' class='row-fluid'>
    <div id="main" role="main" class="span12">
        <div class="row-fluid">
           <div id='main_content' class="span9">
               // main container
           </div>
           <div id='side_bar' class="span3">
               // sidebar container
           </div>
        </div>
    </div>
  </div>
</div>

Also, you 'desired output' shows a header-- is that the browser or do you want a 100% widget bar on the top? If so you could just put a nav on the top like this:

<div class="container-fluid">
<div class="navbar navbar-static-top">
  <div class="navbar-inner">
    <ul class="nav">
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
    </ul>
  </div>
</div>
</div>
<div class="container">
  <div id='main_container' class='row-fluid'>
    <div id="main" role="main" class="span12">
        <div class="row-fluid">
           <div id='main_content' class="span9">
               // main container
           </div>
           <div id='side_bar' class="span3">
               // sidebar container
           </div>
        </div>
    </div>
</div>
</div>

Thanks a lot! I have everything inside a container (i.e class='container') already, but that container also includes the header. Should I wrap the main div with it's content into another div with class='container'? — holyredbeard, Apr 08 '13 at 19:07
I tried your solution for the widget bar as well and it works except that it only reaches ~90% horizontally, which is strange. Do you have any idea why? — holyredbeard, Apr 08 '13 at 19:08

Troubles with positioning

2 Answers2