properly setting the percentage height of a parent div and children divs

properly setting the percentage height of a parent div and children divs

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
.Container {
height: 100%;
min-width: 600px;
overflow-y: hidden;
}
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.
border: 1px solid #E0E0DF;
bottom: 10px;
box-shadow: 2px 2px 4px #888888;
float: left;
height: 100%;
overflow-y: scroll;
width: 18%;
}
I add "list" 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