title: Twitter bootstrap fluid layout designing trouble
body: <p>I am designing a fluid layout with twitter bootstrap but unfortunately there is some mistake in how i am approaching it.</p>
  
  <p>Please advise where am i doing wrong. I have created a navbar div which contains navbar-inner and within that i have container. Within a container a row.</p>
  
  <p>In a row i have 3 elements the project-name , the navigation bar and the login section.</p>
  
  <p>On shrinking the page the project name stays in correct position, the navbar is hidden to show up only on click and the third the login section gets dislocated.
  I can't  understand why it is getting dis located. </p>
  
  <p>I have uploaded the code on ---> <a href="http://jsfiddle.net/GgzgB/2/" rel="nofollow">http://jsfiddle.net/GgzgB/2/</a>
  but due to missing images the background is not shown.
  PS: this is my first css attempt</p>
  
  <pre><code>&lt;body&gt;
  &lt;div class="navbar navbar-fixed-top"&gt;
      &lt;div id='cssmenu' class="navbar-inner"&gt;
      &lt;!--&lt;div class="navbar-custom"&gt;--&gt;
          &lt;div class="container"&gt;
          &lt;div class="row"&gt;
                  &lt;div class="span2"&gt;
                      &lt;!--&lt;a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"&gt;
                          &lt;span class="icon-bar"&gt;&lt;/span&gt;
                          &lt;span class="icon-bar"&gt;&lt;/span&gt;
                          &lt;span class="icon-bar"&gt;&lt;/span&gt;
                      &lt;/a&gt;--&gt;
                      &lt;a class="brand" href="#"&gt;Project name&lt;/a&gt;
                  &lt;/div&gt;&lt;!--end of first col -span2--&gt;
                  &lt;div class="span7"&gt;
                      &lt;div class="nav-collapse collapse"&gt;
                          &lt;ul class="nav"&gt;
                              &lt;li class='active '&gt;&lt;a href='#'&gt;&lt;span&gt;Home&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href='#'&gt;&lt;span&gt;Products&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href='#'&gt;&lt;span&gt;Company&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href='#'&gt;&lt;span&gt;Contact&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/div&gt;&lt;!--end of nav-collapse collapse--&gt;
                  &lt;/div&gt;&lt;!--end of second col - span5--&gt;
                  &lt;div class="span3"&gt;
                      &lt;div class="login"&gt;
                          &lt;form class="form-signin"&gt;
                              &lt;div class="row"&gt;
                                  &lt;div class="span1"&gt; 
                                      &lt;div class="row"&gt;    
                                          &lt;input type="text" class="input-header-small pull-left" placeholder="Username"&gt;
                                      &lt;/div&gt;
                                      &lt;div class="row"&gt;
                                          &lt;input type="password" class="input-header-small pull-left" placeholder="Password"&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                                  &lt;div class="span1"&gt;
                                      &lt;div class="row"&gt;
                                          &lt;button type="submit" class="btn btn-success btn-medium pull-right"&gt;Sign in&lt;/button&gt;&lt;/div&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;&lt;!--end of inner 1st row--&gt;
                              &lt;/form&gt;
                          &lt;/div&gt;&lt;!--end of login--&gt;
                      &lt;/div&gt;&lt;!-- end of span3--&gt; 
                  &lt;/div&gt;&lt;!-- end of row --&gt;
              &lt;/div&gt;&lt;!-- end of container --&gt;
          &lt;/div&gt;&lt;!-- end of inner --&gt;
      &lt;/div&gt;&lt;!-- end of navbar navbar-fixed-top --&gt;
  &lt;/body&gt;
  </code></pre>