How to not wrap contents of a div

Question

I ve got a fixed-width div with two buttons in it  If the labels of the buttons are too long  they wrap  ndash  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

User · Answer

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    lt form gt       lt div style  float  left  background-color  blue  gt           lt input type  button  name  blah  value  lots and lots of characters   gt           lt input type  button  name  blah2  value  some characters   gt       lt  div gt   lt  form gt

User · Answer

If your div has a fixed-width it shouldn t expand  because you ve fixed its width   However  modern browsers support a min-width CSS property   You can emulate the min-width property in old IE browsers by using CSS expressions or by using auto width and having a spacer object in the container   This solution isn t elegant but may do the trick    lt div id  container  style  float  left  gt     lt div id  spacer  style  height  1px  width  300px  gt  lt  div gt     lt button gt Button 1 text lt  button gt     lt button gt Button 2 text lt  button gt   lt  div gt

User · Answer

Try white-space  nowrap  Documentation  https   developer mozilla org docs Web CSS white-space

User · Answer

Forcing the buttons stay in the same line will make them go beyond the fixed width of the div they are in  If you are okay with that then you can make another div inside the div you already have  The new div in turn will hold the buttons and have the fixed width of however much space the two buttons need to stay in one line   Here is an example    lt div id  parentDiv  style  width   less-than-what-buttons-need px   gt       lt div id  holdsButtons  style  width    gt  -than-buttons-need px   gt          lt button id  button1  gt 1 lt  button gt          lt button id  button2  gt 2 lt  button gt       lt  div gt   lt  div gt    You may want to consider overflow property for the chunk of the content outside of the parentDiv border   Good luck

User · Answer

A combination of both float  left  white-space  nowrap  worked for me   Each of them independently didn t accomplish the desired result

User · Answer

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

[html] How to not wrap contents of a div?

Examples related to html

Examples related to css