Is it possible to make the content and the navigation fit to content but both the content (black outline) and the side navigation automatically fit to the footer.. as you can see from the image below the side content goes passed the footer

(CSS newbie here)


1.) Have less textual content.
2.) Make the black outline automatically expand. (Uh, I think you'd need background: url(images/image) repeat-y or something. I'm not a CSS guy, but I think it goes something like that.

You can always try to Google it, or head over to www.w3schools.com and find your answer.

It would help to see your code.

If you are trying to make content fit within one screen on each user's monitor, it is not possible without all kinds of tricky JS programming. The web is designed so content expands downward to accommodate all available text.

The internet is not designed to give you a screen to play with. There is no such thing as a footer in web design (other than a displayed last line of a table). The best you can do is adjust things so they fit on the smallest resolution (use 640 x 480), and then let them expand or move as needed on larger screens.

You can approximate, by using sizes defined in inches or centimeters. Put everything you want contained inside a div having a defined size and a black border.

But be prepared for the div to expand beyond the defined size if the content won't fit. Divs are fluid in nature.