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).

  1. left side column has have min-width, 200px, width:25%.

  2. 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 ?

link jsfiddle

add white-space:nowrap , overflow:hidden outer:

.outer {     width: 100%;     border: 1px solid black;     white-space:nowrap;     overflow:hidden; } 

jsfiddle example


Comments

Popular posts from this blog

database - VFP Grid + SQL server 2008 - grid not showing correctly -

jquery - Set jPicker field to empty value -

.htaccess - htaccess convert request to clean url and add slash at the end of the url -