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
display: table-cell;
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 without display: table-cell
wolfcry911 This is exactly what I need. Thank you so much
Thank you all for your help
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 solutionEdit: 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.
Perhaps you need to show us your design so we can better assist you.
Here's another version without display: table-cell
wolfcry911 This is exactly what I need. Thank you so much
Thank you all for your help