Menu
I have 2 columns (inline blocks) in a container (100% width).
Left side column has to have a min-width, say 200px, width:25%.
Right side column has width:75%
<style> .outer { width: 100%; border: 1px solid black; } .left, .right { display:inline-block; } .left { min-width: 200px; width: 25%; background-color: #dcc2c2; } .right { width: 75%; background-color: #d0dee8; } </style> <div class="outer"> <div class="left">left</div> <div class="right">right</div> </div> Until the min-width is reached when resizing, the columns sit side by side which is what I want, but once the min-width kicks in, the right column falls on the next line.
How can I make the right column to shrink but not fall on the next line ?
Link to JSFiddle
673
To get all elements to appear on one line the easiest way is to: Set white-space property to nowrap on a parent element; Have display: inline-block set on all child elements.
As a result, the elements can sit next to each other. The major difference between display: inline; and display: inline-block; is that, display: inline-block; also allows us to set the width and height of the element. We can prevent inline-block divs from wrapping by adding suitable Bootstrap classes.
You can force the content of the HTML <div> element stay on the same line by using a little CSS. Use the overflow property, as well as the white-space property set to “nowrap”.
An inline element does not start on a new line. An inline element only takes up as much width as necessary. This is a <span> element inside a paragraph.
Add white-space:nowrap and overflow:hidden to outer:
.outer { width: 100%; border: 1px solid black; white-space:nowrap; overflow:hidden; } jsFiddle example
176
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
