[Solved] natural width on the right, remaining width on the left.

[damon]

I have a section here.. basically, 2 buttons on the far right taking as much room as they need to.

A search form with an input that grows to be as wide as possible without taking over from the buttons which are standard width of text+padding.

I can make it work with percentages and careful modifications at different breakpoints, but I would rather the button widths be “natural”. Hopefully that makes sense.. here is a codepen:

http://codepen.io/thedamon/pen/KwoEOp

Maybe missing something basic but I can’t figure out how to get this happening.

[Beverleyh]

Can you set an explicit width on the .buttons div?
e.g .buttons { width:17em; } When that’s set, the input field extends to fill the remaining space.

[Senff]

I’m not sure what you mean by that.

The fact that their width is not specifically set (in pixels or percentages), but determined by the length of their contents.

[damon]

Still getting used to display: table-cell. thank you!

[Author]

Posts