Responsive Design – Sizes

[DADE]

Hey guys,
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.

Here’s example:

http://jsfiddle.net/HSXDW/

Thank you.

[Paulie_D]

The fiddle is doing exactly what you want. The boxes have min-width and once that is reached…something has to move.

As the green sidebar can no longer fit in a box that is less than 600px wide it has to drop down.

What would you like to have happen when the viewport is under 600px?

[wolfcry911]

His problem exists between 667px and 600px…

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.

[Paulie_D]

Weird….there something about math that is rattling around in my head but I can’t work it out.

This should work…shouldn’t it?

[Paulie_D]

Could we put the % width items in a sub-wrap with a min-width of 600px.

I think that would work…wouldn’t it?: http://codepen.io/anon/pen/wIrqa

EDIT: Hmmm…then the min-widths are being ignored.

[CrocoDillon]

Not sure if you can do this without MQ, tables (in css) or flexbox.

[Paulie_D]

Ah. I see @wolfcry has figured out the math issue I was having trouble with. B-)

[Author]

Posts