The Lodge is members-only web design and development videos and live help. Log In or Sign Up.
I’m trying to do something that may seem simple but I cannot find a good solution.
2 elements side by side ( div, span, your choice)
Left element must takes 66% of the space
Right element takes 33% of the space but need to have a min-width of 300px
The problem is that when I reach 300px the right element goes under the left one.
When the right element reach 300px I want it to stay there and the left one to start shrinking.
Thank you for your help
@RayHell, `display: table-cell;` would be your solution
**Edit**: here’s the pen http://codepen.io/ChrisPlz/pen/Icfky
Works great thanks.
Too bad it’s not working on IE7
Must try to find a work around.
Yea, IE7 sucks like that..no support for table display, you could try this polyfill http://tanalin.com/en/projects/display-table-htc/
Can’t you just use a 900px media query?
ChrisP: Yeah I’ve tried it. It doesn’t behave very well..
Paulie_D: Could work if it was used full screen, but it’s gonna be use in different sized container. Thanks anyway.
@RayHell, if IE7 support is that critical, you could always do an IE7 only stylesheet with fixed widths
im with @ChrisP on this. if old IE is messing me up i dont hesitate to serve them a stripped down style sheet.
the future is now.
>Paulie_D: Could work if it was used full screen, but it’s gonna be use in different sized container.
Perhaps you need to show us your design so we can better assist you.
[Here’s another version](http://codepen.io/wolfcry911/full/IfsDp “”) without display: table-cell
wolfcry911 This is exactly what I need. Thank you so much
Thank you all for your help
You must be logged in to reply to this topic.
Search for Stuff
Browse the Archives
Get the Newsletter
... or get the RSS feed