title: properly setting the percentage height of a parent div and children divs
body: <p>I'm trying to figure this out without making to much of a mess here. I have one container div
  then within it i have 3 more divs for wich are floated left. My problem is that my container div has a style of height of 100%.
  like this</p>
  <pre><code>.Container {
  height: 100%;
  min-width: 600px;
  overflow-y: hidden;
   }
  </code></pre>
  <p>and the one of my child div inside the container div(sidebar1), (for the sake of clarity ill keep it to just one div) has this css.</p>
  <pre><code> border: 1px solid #E0E0DF;
  bottom: 10px;
  box-shadow: 2px 2px 4px #888888;
  float: left;
  height: 100%;
  overflow-y: scroll;
  width: 18%;
    }
  </code></pre>
  <p>I add &quot;list&quot; elements to the sidedar1 div using jquery.The problem that I'm encountering is that i don't actually get the scroll bar to appear until there are like 3 or 4 items past the view and even when the scroll bar show up I can't scroll all the way down to see them. I understand it has something to so with the parent being 100% height and the child also being 100%. I cant see the bottom of the sidebar1 scroll plus i have the scroll bar hidden for container div. what is the best way to do this? i want to have  container div that basically expand the full length and width of the users screen without any scroll bars and then within it i would like to have my child divs floated left but i don't want  them to lose view if that makes any sense. I would like to be able to see their full scroll bar when they appear.
  Thanks in advance
  Miguel</p>