- This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
Viewing 7 posts - 1 through 7 (of 7 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
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:
Thank you.
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?
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.
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?
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.
Not sure if you can do this without MQ, tables (in css) or flexbox.
Ah. I see @wolfcry has figured out the math issue I was having trouble with. B-)