Div Tag Heights and scroll bars - css

Question

I have a layout using DIV tags and I have having a hard time controlling the fill of the div tags as well as unnecessary scroll bars. When the content in the "rightside" div tag doesn't fill the screen there is still a scroll bar on the page. How do I cut the tags so they don't fill past the first screen if not needed.
A second issue that I have is when there is enough content in the "rightside" div tag to create the need for a scroll bar, the background of the "sidebar" div tag does not extent to match the bottom of the "rightside"
I have played around with so many of the tag, I have no clue where to go from here. Any help is greatly appreciated!
Here is my CSS Code:
.content_container {
border:2px solid red;
overflow: auto;
height:100%;
}
#sidebar {
background:#a4c2c2;
width:231px;
font:12px georgia;
color: #336666;
line-height:18px;
float:left;
position: absolute;
overflow:hidden;
z-index:-1;
height:100%;
min-height:auto;
}
#sidebar div {
height:2000px;
}
#rightside {
float: left;
width: 500px;
height:100%;
margin-left:231px;
padding: 10px 0px 0px 25px;
}
http://jsfiddle.net/03hcm6ta/
EDIT-
I solved my issue, well almost, with a table. However there is a weird border issue happening and I can't seem to solve it. The side bar and rightside div tags dont seem to completely cover the content_container div. Any suggestions?
http://jsfiddle.net/eh92awh0/

Answer 1

Hopefully I've understood your issue... You had a couple of stray /div tags plus you'd opened paragraphs with P and closed with /p and some duplicated classes in your CSS :)
EDIT - Updated fiddle; http://jsfiddle.net/richardblyth/L9afr65f/
The key is setting all relevant elements to
height: 100%;
position: relative;
And on your container
overflow: hidden;
See my fiddle :)