eiranix Posted March 21, 2014 Share Posted March 21, 2014 I have 6 divs that I want sitting side by side and have their widths expand to fit the parent equally. But then I also want the 6 divs to start stacking under each other when their minimum-width is reached... Is there a way to do this with css? Link to comment Share on other sites More sharing options...
Ingolme Posted March 21, 2014 Share Posted March 21, 2014 Give percentage widths to your <div> elements. 16% should be enough to have six per row. Give a min-width to the <div> elements and they'll start stacking when that width is reached. Link to comment Share on other sites More sharing options...
eiranix Posted March 22, 2014 Author Share Posted March 22, 2014 That would work for one row but what about when they start stacking below each other after being shrunk past min-width? I would like them to still expand to the parent when I have two rows of say 3 and 3... Link to comment Share on other sites More sharing options...
Ingolme Posted March 22, 2014 Share Posted March 22, 2014 It will go reducing the amount of boxes per row as the window gets thinner. The will be a gap on the right side, but it would be smaller than the width of one box and in the best of cases the gap will hardly be noticeable. That's about as much as you can get with CSS. Then there's @media queries so you can apply a different style to the boxes when the window gets too small. Link to comment Share on other sites More sharing options...
eiranix Posted March 22, 2014 Author Share Posted March 22, 2014 Ok I'll look into it, thanks for your help.I may have to re-think how I want it to behave.... Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now