How to not wrap contents of a div?

I've got a fixed-width div with two buttons in it. If the labels of the buttons are too long, they wrap – one button stays on the first line, and the next button follows underneath it instead of adjacent to it.

How can I force the div to expand so that both buttons are on one line?

Solution 1:

Try white-space: nowrap;

Documentation: https://developer.mozilla.org/docs/Web/CSS/white-space

Solution 2:

A combination of both float: left; white-space: nowrap; worked for me.

Each of them independently didn't accomplish the desired result.

Solution 3:

I don't know the reasoning behind this, but I set my parent container to display:flex and the child containers to display:inline-block and they stayed inline despite the combined width of the children exceeding the parent.

Didn't need to toy with max-width, max-height, white-space, or anything else.

Hope that helps someone.

Solution 4:

If you don't care about a minimum width for the div and really just don't want the div to expand across the whole container, you can float it left -- floated divs by default expand to support their contents, like so:

<form>
    <div style="float: left; background-color: blue">
        <input type="button" name="blah" value="lots and lots of characters"/>
        <input type="button" name="blah2" value="some characters"/>
    </div>
</form>