If browser width less than content width content get's clipped

If the browser width is resized to smaller than the viewable area then the content within certain divs get’s cut off here:

http://stepsdanceutah.com/prototype/StepsDanceLayout.html

Here is a video showing the problem

http://screencast.com/t/9wsuJi5chz

Any idea how to fix that problem?

Thanks for any help.

Hi,
Your .innerHeader div has a width of 1115px on it while your #mainContent & #footer do not have a width. They are defaulting to 100% width which is the viewport area at any given instance.

If your viewport gets below the 1115px width and you scroll then you get the gaps to the side of the other divs.

The cure is to set a min-width on them that is the same as your innerheader width

#mainContent, #footer {min-width: 1115px;}

You could try

.innerContent, #footer {min-width: 960px;}

EDIT: oops, beaten.

That worked perfect, thank you for the help / explanation.