Bootstrap - alignment issues with container-fluid

Question

I have a comics site, http://hittingtreeswithsticks.com , and want to maintain a 100% width for my header (so it stretches 100% on any browser), but a fixed width for my content (want to maintain fixed 950px width).

Therefore, I put the header and footer in <div class="container-fluid"> and the main content in <div class="container"> to achieve that.

I've been testing locally on IE9, Chrome, and FireFox on a 1920 x 1080 resolution and it the header looked fine.

But when I tested on a smaller monitor, 1366 x 768, the header items seems to mush together.

In the header.php file, I have this set up (simplified) for the heading logo and links

<div class="container-fluid">
   <div id="header">
     <div class="row-fluid">
       <div class="span3 offset3">
         <logo>
       </div>
       <div class="span1">
        <comics link>
       </div>
       <div class="span1">
        <about link>
       </div>
      And so on...

In header.php, I put an opening <div class="container"> so that all other templates that include the header will be within containter and not container-fluid .

Any ideas why that might be happening?

Thanks!

Answer 1

You do not have a minimum width set for your content, and thus the browser will "mush" it to make it adapt to smaller resolutions.

You can try to use a CSS rule such as

#header { min-width: 1000px; } 

(1000px is arbitrary here). This will prevent the header from wrapping to two lines, but will obviously cause some part of it to be outside the visiable area in smaller screens.

Edit: if you provide a fiddle with your code or a link to a working page, we'd be able to see if there are paddings/margins at play that affect this as well.

Answer 2

Try to change the overflow property in your #header element in your comic_style.css

#header {
background: url("images/SiteDesign/Comic_Header.png") repeat scroll 0 0 transparent;
height: 50px;
overflow: auto;scroll;
}

or the img tag in bootstrap.css might be creating problem

img {
    border: 0 none;
    height: auto;
    vertical-align: middle;
}

create another tag for the header image

Answer 3

Well first of all don't mess anything in the bootstrap.css also it's not so clever to correct something by writing a new css class or something like.

In other words don't try to fix that by css because you will have more problems later.

So here we go

<div class="container-fluid">

That has to go below not at the top.

<div id="header">

you don't need that div except if you want a whatever

Be careful with the offset and if try something like that:

<div class="container-fluid">
    <div class="row-fluid">
        <div class="span3">

And the most important remember that if you fix something for other size then you have to do it and for other and so on.That means you are not going responsive!

My suggestion is to try with the order of the divs classes and not at all with css.

Answer 4

I looked at the code on your page, and I believe this may solve your problem:

<div id="header">
   <div style="width: 950px;margin-left: auto;margin-right: auto;left: 0;right: 0;">
      <a href="./?action=homepage&amp;page=1&amp;site=comics"> <img id="logo" src="./images/SiteDesign/Logo_Small.png" alt="HTwS Logo"> </a> &nbsp;
      <div class="comicsSite" style="display: inline; background-clip: padding-box; padding-bottom: 15px;">  <a href="./?action=homepage&amp;page=1&amp;site=comics"> <img id="comicssubsite" src="./images/SiteDesign/Comics_subsites.png" alt="Comics"> </a> </div>
      <div class="comicsHeadingOffset" style="display: inline; margin: 0;"> <a href="./?action=about&amp;page=1&amp;site=about"> <img id="aboutsubsite" src="./images/SiteDesign/About_subsites.png" alt="About"> </a> </div>
      <div class="comicsHeadingOffset" style="display: inline; margin: 0;"> <a href="./?action=homepage&amp;page=1&amp;site=artwork"> <img id="artworksubsite" src="./images/SiteDesign/Artwork_subsites.png" alt="Artwork"> </a> </div>
   </div>
</div>

Answer 5

Instead of using spans, you could use the bootstrap nav element:

    <div class="navbar>
      <div class="navbar-inner">
        <div class="container-fluid">
          <ul class="nav">
    <li><a href="#">Charts</a></li>
    <li><a href="#">Life</a></li>
    <li><a href="#">Office</a></li>
            <li><a href="#">Political</a></li>
            <li><a href="#">Misc</a></li>
      </ul>
     </div>
       </div>
    </div>