CSS For responsive sidebar and main content? - html

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%; }
}