CODEWITHSUNDEEP
phpcsstwitter-bootstrap
user3871
user3871

Reputation: 12718

Bootstrap - alignment issues with container-fluid

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.

enter image description here

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

enter image description here

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!

Upvotes: 5

Views: 3906

Answers (5)

Mhche
Mhche

Reputation: 143

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.

Upvotes: 2

tahdhaze09
tahdhaze09

Reputation: 2213

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>

Upvotes: 1

darwin
darwin

Reputation: 240

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>

Upvotes: 1

Deepanshu Goyal
Deepanshu Goyal

Reputation: 2813

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

Upvotes: 2

Nick Andriopoulos
Nick Andriopoulos

Reputation: 10643

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.

Upvotes: 6

Related Questions