Menu
You can make the contents of HTML <p>, <div>, and <span> elements not to wrap by using some CSS. You need the white-space property.
If you don't want wrapping, you should not use floats - they were created specifically for wrapping. Use a parent container with overflow:auto and white-space:nowrap and children with display:inline or inline-block .
Add white-space: nowrap; to your . layout style declaration. This will do exactly what you need: preventing the divs from wrapping.
You can add white-space: nowrap to the p tag css and it will stop the wrapping.
Try white-space: nowrap;
Documentation: https://developer.mozilla.org/docs/Web/CSS/white-space
A combination of both float: left; white-space: nowrap; worked for me.
Each of them independently didn't accomplish the desired result.
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.
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With