The forums ran from 2008-2020 and are now closed and viewable here as an archive.

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

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #196446

    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:

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


    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.


    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.


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

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.