html - Prevent Footer content from moving when browser window resized -

i've looked @ many thread , understand width , display tags ( min, max, block inline, inline-block , table etc), i'm having terrible time trying fix issue page footer. when resize browser window, in footer collapses.

can kindly check markup , let me know need add in css fix this, please.

basically i'd browser window pass on content , contained fixed centrally... how looks, laid out, when window full-size.

thanks!

site: http://mixititb.com/z_test_site/index.html

edit;

two issues i'm seeing when change window size, footer collapsing , perhaps making content bunch up. so, first priority fix , aligning content center.

for these 2 issues, i'm stuck , appreciate newbie fixed. checking code!

edit 2;

just fixed footer sizing overflow-x: hidden; fix_footer class! :)

so, we/i have figure out why content collapsing when resize window. takers? :) :)

edit 3;

@ peehaa, easwee, mario, user35443, starkeen... please kindly take off hold, i'm unsure how edit question i've fixed issues myself , below, few remain, didn't want ask question. thanks, appreciated!

edit 4;

fixed through reorganising html structuring div's classes , setting .container white instead of footer itself. setting main div's (i.e. nav, content , footer) class of container allowed fixed scaling of footer taking width set in css.

thanks help!

search media queries on google , center elements text-align: center or margin: 0 auto, if elem floated, use clearfix.

your footer breaks @ 900px.

example:

@media screen , (max-width: 900px) { center elem }