I have two inline-blocks with their own max/min-width. I want them to respond to with the width of the wrapper they are contained in, which changes depending on browser window size. However right now these two inline-blocks automatically adjust to the min-width size and that’s it.
Now, if I change them to “block” they adjust in size properly but they are no longer inline. Any suggestions on what I may be doing wrong or how to best address this?
You are probably better off using % widths in that case. Make sure to design these columns along with the whole page, so that things are all in harmony. Set a max and min width for the page container and work your way in from there.
Regarding the issue, are you recommending % widths because it’s easier or because it’s the only option? I just want to make sure I understand what’s at hand.
It’s not the only option, but the best one I’m aware of. You could also use display: table &co, but I don’t find that’s a very good option for page layout.
The thing to know here inline elements cant have dimensions. You will need to float the elements or use display:inline-block;
as has been said before, you will find that it makes more sense to apply min/max width on the container.
hope that helps