The dark grey content area should be going to the bottom of the page, regardless of how much “content” is being displayed in it. I do not want a scroll bar in the dark gray area, I want the browser to scroll as it normally does with the navigation and logo staying static on the page.
I have tried setting the container to height: 100% but this doesn’t help because when there is more content than is able to fit in the browser, that content is cut off… instead of being able to scroll and see it.
This seems like a very simplistic layout in my mind but I can’t figure out how to make it happen in the CSS code. Help would be GREATLY appreciated!
The only things that you need to keep in mind is that you will need to use display: table-cell; on the elements you want to be equal height (and side by side), and display: table; on the parent element. You should also specify a width on the elements (especially the parent).
@aarongmoore, instead creating gutters (with extra mark up) by creating another element declared as table cell and giving it width, you can set border spacing on parent which is declared as table like this: http://codepen.io/joe/full/fLCpu