Child div width exceeding parent's div width

Question

Child element's width is exceeding its parent div's width. I assume this must have been caused because I'm setting the position to be fixed, but I don't know what to replace it with. This div is a navigation bar that should be fixed to the top of the window. When I get rid of position:fixed, the size is fit to the parent div nicely. However, the nav bar is no longer fixed to the top. How do I solve this problem?

reference: page

CSS:

.fixed_pos {
    position: fixed;
}

View:

<div class="container-fluid">
  <div class="row-fluid">
      <div class="span11 fixed_pos">
        <ul class="nav nav-tabs">
        </ul>
      </div>
  </div>
</div>

Thanks a lot in advance!

You should add all the css properties for these divs so we can see what the problem may be. — Spencer May, Dec 28 '12 at 06:23

score 4 · Accepted Answer · answered Dec 28 '12 at 07:33

For a fixed nav you usually need it on the outer most layer or in its own absolute div. It's fairly straight forward. Here's a fiddle for you to look at and adjust. Still not sure what you really trying to make with all those divs, but this is a basic setup that can be easily adapted.

http://jsfiddle.net/hakarune/FMmEc/

The HTML:

<div id="wrap">
<nav>
<li><a href="#">About Us</a></li>
<li><a href="#">Our Products</a></li>
<li><a href="#">FAQs</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Login</a></li>
</nav>

   <div id="header">
        <h1>CSS Newbie: Super Simple Horizontal Navigation Bar</h1>
    </div>

   <div id="content">
      <p> Basic Fixed Nav at Top</p>

   </div>
</div>

The CSS

nav {
    width: 100%;
    float: left;
    margin: 0 0 15px 0;
    padding: 0px;
    list-style: none;
    background-color: #f2f2f2;
    border-bottom: 1px solid #ccc;
    border-top: 1px solid #ccc; 
    position:fixed;
    top:0px;
}
nav li {float: left; }
nav li a {
    display: block;
      padding: 8px 15px;
      text-decoration: none;
      font-weight: bold;
      color: #069;
      border-right: 1px solid #ccc; }
nav li a:hover {
      color: #c00;
      background-color: #fff; }
   /* End navigation bar styling. */

   /* This is just styling for this specific page. */
body {
      background-color: #555; 
      font: small/1.3 Arial, Helvetica, sans-serif; }
#wrap {
      width: 750px;
      margin: 0 auto;
      background-color: #fff; }
h1 {
      font-size: 1.5em;
      padding: 1em 8px;
      color: #333;
      background-color: #069;
      margin: 30px auto 0;
}
#content {
      padding: 0 50px 50px; }

This is closest to the right answer. Refer to http://stackoverflow.com/questions/9350818/fixed-sidebar-navigation-in-fluid-twitter-bootstrap-2-0 — Maximus S, Dec 28 '12 at 07:46
I checked your reference page and it looks like it's working perfect, at least on my end. Except when you resize the browser below 800... Is that what you wanted fixed, your nav bar from disappearing at smaller window sizes? (Also the button disappears too...) — hakarune, Dec 28 '12 at 07:59
I edited the fiddle to reflect a fluid style that is dynamic. Adding `min-width:300px;` it stops it from being resized smaller than the length required of the nav bar. — hakarune, Dec 28 '12 at 08:13
thanks for your help. Yes, the reference page is working perfectly now because I solved the problem. The solution was separating the nav bar from the main container-fluid, and giving it `right:0, left:0, position:fixed`. That effectively reduced all the unnecessary margin and made the nav bar nicely fit to the entire screen. — Maximus S, Dec 28 '12 at 08:51

score 0 · Answer 2 · answered Dec 28 '12 at 06:52

Fixed position elements are positioned relative to the viewport, not their containing elements (details). The following might work:

<body>

    <!-- the stuff you have up here... -->

    <div class="container-fluid"
        style="
            position: fixed;
            left: 0;
            right: 0;
            padding-right: inherit;
            padding-left: inherit;">

        <div class="row-fluid" id="menus-desktop"><!-- MENUS DESKTOP -->

            <!-- set to span12 and removed fixed_pos class -->
            <div class="span12" style="position: relative;">
                <!-- ul, etc... -->
            </div>
        </div>
    </div>

    <!-- the previous container but without the nav stuff -->

</body>

I moved the nav elements into their own fixed container which is a direct child of the body with it's padding to inherit so it will adapt to whatever you set on the body. Then, the previously fixed <span> element should no longer be fixed and is set to span12 so it goes the correct width.

I'm trying to fit my nav width perfectly to row-fluid width. I think setting position:fixed to any fluid element shrinks its width to fit the contents inside... — Maximus S, Dec 28 '12 at 07:23

Child div width exceeding parent's div width

2 Answers2