title: CSS - Why is my content not scrolling?
body: <p><strong>UPDATE 2</strong> I just fixed "Edit 2" from below, where the contents of bodySection div were scrolling up over top of the navLogo/navElements divs.  Position: relative was the culprit there, and now I have no position (so, defaults to static, from what I understand) on the bodySection class, and it works as expected.</p>
  
  <p>I still think some of the things within my code are a little funky (updated fiddle and code embedded below).  For instance, to have everything line up like I want it to, I have some very, very strange width properties;</p>
  
  <p>left, mid, and rightSection are all set to 30% width, so they take up ~1/3 of the available space.  This makes perfect sense.</p>
  
  <p>bodySection class has a width of 98%, along with 1% padding left, and 2% padding right.  Why isn't it 100% width and 1% padding on both sides?  It sits inside of the 'container' div, which is 100% width.  I figured it would inherit boundaries from the parent div.</p>
  
  <p>.navElements class has a width of 95%, and if I bump it to 100%, it acts all kinds of funny, pushing text off the viewable screen.  Why is that?</p>
  
  <p>.navLogo class has a width of 100%, and even the img is tagged at 100%, but I can tell you, the size you see is not 100% the actual image size.  It <strong>IS</strong> the size I want, but it's not 100%, why is that?</p>
  
  <p>Even on a 32" monitor (my external monitor for my laptop), I see a scroll bar horizontally (across the bottom).  Obviously I don't want this.  Why is this here?</p>
  
  <p>Updated Fiddle: <a href="http://jsfiddle.net/hznpw2dg/2/" rel="nofollow">Fiddle Here</a></p>
  
  <p>Updated Code:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta name="description" content=""&gt;
      &lt;meta name="keywords" content=""&gt;
      &lt;title&gt;Frick Solutions - Technology Consulting for Small Business&lt;/title&gt;
      &lt;meta name="keywords" content="HTML,CSS"/&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"/&gt;
      &lt;link rel="stylesheet" type="text/css" href="/redesign/css/fricksolutions.css"/&gt;
      &lt;link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Roboto"&gt;
    &lt;/head&gt;
    &lt;body id="home"&gt;
    &lt;div class ="container"&gt;
  
    &lt;div class="navLogo"&gt;
    &lt;a href="/index.html"&gt;&lt;img src="/redesign/img/FrickSolutionsLogoWhite.png" style="height:100%; width:AUTO%;"&gt; &lt;/a&gt; &lt;!-- style="max-width:40%;max-height:3%;"&gt;&lt;/a&gt; --&gt;
  
    &lt;div class="navElements" align="right"&gt;
    &lt;li&gt; &lt;a href="/why.html"&gt;Why Us?&lt;/a&gt;&lt;/li&gt; 
    &lt;li&gt; &lt;a href="/smallbusiness.html"&gt;Small Business&lt;/a&gt;&lt;/li&gt; 
    &lt;li&gt;&lt;a href="/servers.html"&gt; Servers &lt;/a&gt;&lt;/li&gt; 
    &lt;li&gt;&lt;a href="/athome.html"&gt; @Home &lt;/a&gt; &lt;/li&gt; 
    &lt;li&gt; &lt;a href="/contact.html"&gt;Contact&lt;/a&gt; &lt;/li&gt;
    &lt;/div&gt; &lt;!--Close navLogo div --&gt;
  &lt;/div&gt; &lt;!--Close navElements div --&gt;
  &lt;div class = "bodySection"&gt;
  here is some text &lt;br&gt;here is some text &lt;br&gt;here is some text &lt;br&gt;here is some text &lt;br&gt;here is some text &lt;br&gt;here is some text &lt;br&gt;here is some text &lt;br&gt;here is some text &lt;br&gt;here is some text &lt;br&gt;here is some text &lt;br&gt;here is some text &lt;br&gt;here is some text &lt;br&gt;here is some text &lt;br&gt;here is some text &lt;br&gt;here is some text &lt;br&gt;
  here is some text &lt;br&gt;here is some text &lt;br&gt;here is some text &lt;br&gt;here is some text &lt;br&gt;here is some text &lt;br&gt;here is some text &lt;br&gt;here is some text &lt;br&gt;here is some text &lt;br&gt;here is some text &lt;br&gt;here is some text &lt;br&gt;here is some text &lt;br&gt;here is some text &lt;br&gt;here is some text &lt;br&gt;here is some text &lt;br&gt;here is some text &lt;br&gt;
  here is some text &lt;br&gt;here is some text &lt;br&gt;here is some text &lt;br&gt;here is some text &lt;br&gt;here is some text &lt;br&gt;here is some text &lt;br&gt;here is some text &lt;br&gt;here is some text &lt;br&gt;here is some text &lt;br&gt;here is some text &lt;br&gt;here is some text &lt;br&gt;here is some text &lt;br&gt;here is some text &lt;br&gt;here is some text &lt;br&gt;here is some text &lt;br&gt;
  here is some text &lt;br&gt;here is some text &lt;br&gt;here is some text &lt;br&gt;here is some text &lt;br&gt;here is some text &lt;br&gt;here is some text &lt;br&gt;here is some text &lt;br&gt;here is some text &lt;br&gt;here is some text &lt;br&gt;here is some text &lt;br&gt;here is some text &lt;br&gt;here is some text &lt;br&gt;here is some text &lt;br&gt;here is some text &lt;br&gt;here is some text &lt;br&gt;
  here is some text &lt;br&gt;here is some text &lt;br&gt;here is some text &lt;br&gt;here is some text &lt;br&gt;here is some text &lt;br&gt;here is some text &lt;br&gt;here is some text &lt;br&gt;here is some text &lt;br&gt;here is some text &lt;br&gt;here is some text &lt;br&gt;here is some text &lt;br&gt;here is some text &lt;br&gt;here is some text &lt;br&gt;here is some text &lt;br&gt;here is some text &lt;br&gt;
  here is some text &lt;br&gt;here is some text &lt;br&gt;here is some text &lt;br&gt;here is some text &lt;br&gt;here is some text &lt;br&gt;here is some text &lt;br&gt;here is some text &lt;br&gt;here is some text &lt;br&gt;here is some text &lt;br&gt;here is some text &lt;br&gt;here is some text &lt;br&gt;here is some text &lt;br&gt;here is some text &lt;br&gt;here is some text &lt;br&gt;here is some text &lt;br&gt;
  here is some text &lt;br&gt;here is some text &lt;br&gt;here is some text &lt;br&gt;here is some text &lt;br&gt;here is some text &lt;br&gt;here is some text &lt;br&gt;here is some text &lt;br&gt;here is some text &lt;br&gt;here is some text &lt;br&gt;here is some text &lt;br&gt;here is some text &lt;br&gt;here is some text &lt;br&gt;here is some text &lt;br&gt;here is some text &lt;br&gt;here is some text &lt;br&gt;
  here is some text &lt;br&gt;here is some text &lt;br&gt;here is some text &lt;br&gt;here is some text &lt;br&gt;here is some text &lt;br&gt;here is some text &lt;br&gt;here is some text &lt;br&gt;here is some text &lt;br&gt;here is some text &lt;br&gt;here is some text &lt;br&gt;here is some text &lt;br&gt;here is some text &lt;br&gt;here is some text &lt;br&gt;here is some text &lt;br&gt;here is some text &lt;br&gt;
  
  &lt;div id = "leftSection"&gt;
  left text test
  &lt;/div&gt;&lt;!-- Close leftSection --&gt;
  &lt;div id = "midSection"&gt;
  mid text test
  &lt;/div&gt; &lt;!-- Close midSection --&gt;
  &lt;div id = "rightSection"&gt;
  right text test
  &lt;/div&gt;&lt;!-- Close rightSection --&gt;
  &lt;/div&gt; &lt;!-- Close bodySection --&gt;
  &lt;/div&gt; &lt;!-- close container --&gt;
  
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>body {
  
    color: black;
    font-family: "Roboto", sans-serif;
    background-color: white;
    margin: 0;  /*use this to ensure left most content goes all the way to border of page */
   }
  
  
  
  
  
  @media screen and (min-width:30em) { /* used to be 600 px */
    .navLogo
    {
    padding-left: 1%;
    padding-right: 1%;
    position: fixed;
    background-color: #373737;
    width: 100%;
    height: 8%;
     }
  
  
     .navElements
     {
     padding-right: 1%;
     font-family: "Roboto", sans-serif;
     background-color: transparent;
     position: absolute;
     bottom: 0px;
     width: 95%;
     padding-bottom: .25%;
      }
  
      .navElements li
      {
      color: white;
      background-color:transparent;
      display: inline-block;
      padding: 5px 10px 0 0;
       }
  
       .navElements a { text-deocration: none; }
       a:link 
      {
    color: white 
  
    }
  a:visited 
    {
    color: white 
    }
    a:hover
    {
        color: grey;      
    }
  
  
   .bodySection{
   padding-left: 1%;
   padding-right: 2%;
   padding-top: 5%;  /*this is here as a hack to make sure the bodySection div shows up under the navLogo/navElement divs*/
   width: 98%; /*
   position: relative;*/
  /* overflow: hidden;*/
  
    }
  
   #leftSection, #midSection, #rightSection {
   width: 30%;
   min-width: 30%;
   height: 100px;
   border: 1px solid red;
   margin-left: 10px;
   float:left; 
   padding-left: 1%;
   padding-right: 1%;
   padding-top: 1%;
   padding-bottom: 1%;
  
   }
  
    .container{
    width: 100%;
    height: auto;
    /*overflow: hidden;*/ }
  
   }
  </code></pre>
  
  <p><strong>UPDATE (minus initially updated Fiddle/Code)</strong> Thank you all for your help already (its been less than an hour, and I've got a lot of good tips already!).  I really do love this community, even though I come here only rarely.  I will need to change that!</p>
  
  <p><a href="http://www.fricksolutions.com/redesign/index.html" rel="nofollow">This is the live version of my redesign</a> -- And Edit 2, I just realized that what I've got now doesn't let me click any of the links I've put in the top nav.  I assume this is because of the bodySection overlap (with the 5% padding), but would love to hear your ideas.</p>
  
  <p>As of now, I haven't implemented too many of the suggestions, but I know I will (I will just need to root through them all and probably test them all as well).  As you can see, I got the scrolling working, and have solved my 'bodySection' issues by putting top-padding of 5% on the div, so it will always drop down below the nav.  Unfortunately, this does not stop the content of the bodySection div from covering the navElements and navLogo divs once you start scrolling.</p>
  
  <p>I am going to remove the code and fiddle below (to avoid confusion) and post my updated code/fiddle up here.  </p>
  
  <p><strong>Original Post (minus code and fiddle link)</strong></p>
  
  <p>So I am relatively novice with CSS (as you may be able to discern from my css file attached in the FIDDLE), but I am working on getting better with it.  I do technology consulting professionally, and want to expand my skills/services to include web design (besides, I want my own website to be great looking, without having to pay for it!).</p>
  
  <p>After a bunch of trial and error, I finally had my top nav looking the way I wanted it.  </p>
  
  <p>Then I started playing with the content, I wanted something like 3x2 table to display icons and text in.  I got it working (a 3x1, with just text for now) as expected, but after I did that, I decided I needed to have something between the header bar and the css table, so I figured I'd throw in a bunch of dummy text and make sure the scrolling went as expected.  What I found was that I was unable to make the body of the page scroll at all.  </p>
  
  <p>I have done a ton of research into trying to fix this, most posts say 'stop using fixed position' or something else to that point.  Unfortunately, if I remove my fixed position, the nav bar either breaks, or it doesn't stay visibile.</p>
  
  <p>In short, this is what I'm looking for:
  My nav bar needs to be on the screen 100% of the time.  I don't need any crazy jQuery to pop it to the top at a certain scroll point - I just want it to always be there.</p>
  
  <p>My content needs to be below the nav bar, in a main div (bodySection).  Within that bodySection, I will need to have the ability to embed my 3x1 (or 3x2) CSS table, composed of leftSection, midSection, rightSection.</p>
  
  <p>Any hints/tips/tricks to clean up my CSS and implementation of it within HTML would be greatly appreciated.  I am completely self taught (HTML and CSS - started learning HTML in the mid 90s as a pre-teen), so I expect to learn a good bit every time I interact with folks here on the forum.</p>