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