CSS For responsive sidebar and main content?

Question

I found what im looking for ALMOST, ( http://codepen.io/anon/pen/PqxQVN ).

But the only problem is i need the container to have height of auto and the sidebar to have a height of 100%. When i do that the sidebar disappears.

    #container { height:500px; width:100% }
.sidebar { background:red; float:right; height:100%; width:20% }
.content { background:green; height: 100px; width:80%; float:left; margin-top: 20px;}

@media screen and (max-width: 1000px) { 
  .sidebar { clear:both; width:100% }
  .content { width:100%; }
}

Any help would be appreciated. :)

Answer 1

I have used the universal selector (*) to remove padding and margin, therefore the sidebar will be 100% of height.

For what concerns the green container, by simply removing the height from 100px to "auto" it will automatically fill the content.

Link to codepen

*{
margin: 0;
padding: 0;
}
#container { height:500px; width:100% }
.sidebar { background:red; float:right; height:100%; width:20% }
.content { background:green; height: auto; width:80%; float:left; margin-top: 20px}

@media screen and (max-width: 1000px) { 
 .sidebar { clear:both; width:100% }
.content { width:100%; }
}

This design isn't perfect as you might find some text going under the sidebar, but should be a good start.

Regards, -Gallo

Answer 2

give the height to sidebar as .sidebar{height:500px;} not to container

*{
margin: 0;
padding: 0;
}
#container { height:auto; width:100% }
.sidebar { background:red; float:right; height:500px; width:20% }
.content { background:green; height: 100px; width:80%; float:left; margin-top: 20px;}

@media screen and (max-width: 1000px) { 
  .sidebar { clear:both; width:100% }
  .content { width:100%; }
}