I have a questions about sizes in responsive design, hope you can help me a little bit.
So lets say we have pretty much basic template. We have our 100% width logotype, than goes navigation, content and sidebar with float:left attribute. Navigation has 20% width, content 60% and sidebar 20%.
So I want that my .content had min-width: 400px; and my side blocks had min-width: 100px ;
But I don’t want that my .content block moved down when it hit 400px width. I want that after .content hit 400px it stays still, but side blocks continue to resize untill it have 100px width.
Dade, the numbers just don’t add up. 100px of a 600px width (the smallest you want the three columns total) is 16.67% – not 20%. So you could adjust the flanking column width percentage, or change it at 667px with a media query, but why? Without the min-width on .content, it would drop to 360px – so you’re dealing with a mess for 40px of content width.