html - How to display inline blocks without breaking them on new line when shrinking parent -
i have 2 columns (inline blocks) in container (100% width).
left side column has have min-width, 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 min-width reached when resizing, columns sit side side want, once min-width kicks in, right column falls on next line.
how can make right column shrink not fall on next line ?
add white-space:nowrap
, overflow:hidden
outer:
.outer { width: 100%; border: 1px solid black; white-space:nowrap; overflow:hidden; }
Comments
Post a Comment