Question

Please, look at this sample template: http://jsfiddle.net/D8cye/2/

As you can see, the navbar expands to the bottom of the sidebar. Why? How can I avoid this?

I know I can workaround this by setting .navbar-inner{height:40px;}. But I feel that I’m doing something wrong of perhaps I have misunderstood something with the fluid grid.

Answer 1

Forked it here http://jsfiddle.net/Astraldiva/r6tHv/.

I think that one of the important things to consider while using twitter bootstraps fluid layout is not to have items with fixed width or the layout will brake. Not sure if this helps but I just rearranged the containers and placed the content in span8 + span4 divs to get similar layout like you wanted and this version should work on different screen sizes.

 <div class=row-fluid>
    <div class=span8>
        <div id=text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
        <div class=navbar>
            <div class=navbar-inner>
                <ul class=nav>
                    <li class=active><a href=#>Home</a></li>
                    <li><a href=#>Link</a></li>
                    <li><a href=#>Link</a></li>
                 </ul>
             </div>
         </div>
    </div>
    <div class=span4>
        <div class=box></div>
        <div class=box></div>
        <div class=box></div>
    </div>
</div>

EDIT

To get the wanted layout Peter made an extension on my idea in this fiddle.

There is a 2 column layout, a fixed with sidebar and fluid content area (with max and min width). So it’s not completely fluid but solves the problem.

<div id=container>
    <!-- Sidebar is floated right and has fixed width -->
    <div id=side>
        <div class=box></div>
        <div class=box></div>
        <div class=box></div>
    </div>
    <!-- Content wrapper is in normal flow with margin-right of at least the width of a sidebar-->
    <div id=main>
        <div class=row-fluid>
          <div class=span12>
            <div id=text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>

            <div class=navbar>
                <div class=navbar-inner>
                    <ul class=nav>
                        <li class=active><a href=#>Home</a></li>
                        <li><a href=#>Link</a></li>
                        <li><a href=#>Link</a></li>
                    </ul>
                </div>
            </div>
          </div>
      </div>
    </div>
</div>

CSS:

#container {
border: 1px solid #f00;
max-width: 600px;
min-width: 300px;
}

#side {
float: right;
width: 100px;
border: 1px solid #0f0;
}

#main {
margin-right: 108px;
border: 1px solid #00f;
}

#text {
padding: 8px; margin: 8px; border: 1px solid #888;
}

.box {
height: 80px;
margin-bottom: 8px;
background: #ddd;
}

Note: twitter bootstrap css included.

Hope it helps.