html - Implementing Header so its elements (logo images) scaffolds with screen size -

i trying make logos in header scaffold (stack downwards) when screen size decreased. @ moment following:

<div id="header_inner"> <div class="logo"><a rel="home" href=""><img src="/logoshort1.png" alt=""></a></div><!-- .logo --> <div id="header_extras"><div id="header_extras_inner"><div class="header_social"><div class="social_icon awake_dark"><a href="https://twitter.com/"><img src="twitter.png" alt=""></a></div><div class="social_icon awake_dark"><a href="https://www.facebook.com/pages/1?fref=ts"><img src="http://10.10.1.202//facebook.png" alt=""></a></div><div class="social_icon awake_dark"><a href="mailto:info"><img src="http:///email.png" alt=""></a></div></div></div><!-- #header_extras_inner --> </div>                <div id="logomob" class="headerstack"><img src="/logomobphone.png"></div> <div id="logoland" class="headerstack"><img src="/logolandline.png"></div>                  </div> 

i simplified css. looked trying much.

http://jsfiddle.net/wtzad/1/

css

#header_inner {      min-width: 900px;      margin: 0 auto; } #header_inner > div {      float: left;      margin: 5px;  /* add space around them */ } 

using set width width: 900px; create horizontal scroll bar. using max-width: 990px; allows flex @ smaller screen sizes.