Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<!--[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]>    <html lang="en" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]>    <html lang="en" class="no-js ie8 ie78 ie89"> <![endif]-->
<!--[if IE 9 ]>    <html lang="en" class="no-js ie9 ie789 ie89"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"> <!--<![endif]-->
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
    
  <h1>Using nothing</h1>
    
  <style>
    .container0 { background:#ccc; margin-bottom:20px; padding:20px 0}
    .column0 { display: inline-block; width: 50%; background:pink }
    .ie7 .column0 {display:inline; zoom:1}
  </style>
    
    <div class="container0">
        <div class="column0">text that can wrap</div>
        <div class="column0">text that can wrap</div>
    </div>
  
  <h1>Using white-space:nowrap on parent</h1>
    
  <style>
    .container1 { white-space: nowrap;  background:#ccc; margin-bottom:20px; padding:20px 0}
    .column1 { display: inline-block; width: 50%; white-space: normal;background:blue }
    .ie7 .column1 {display:inline; zoom:1}
  </style>
    
    <div class="container1">
        <div class="column1">text that can wrap</div>
        <div class="column1">text that can wrap</div>
    </div>
​
  <h1>Using font-size:0 on parent with rem unit (IE9+)</h1>
    <style>
        .container2 {background:#ccc; padding:20px 0; font-size:0;}
        .column2 { display: inline-block; vertical-align:top; width: 50%; background:red; font-size:1rem }
        .ie8 .column2 {font-size:16px;} /* IE8 doesn't support rem units :( */
        .ie7 .column2 {display:inline; zoom:1; font-size:16px;}
    </style>
  
<div class="container2">
  <div class="column2">text that can wrap</div>
  <div class="column2">text that can wraptext that can wraptext that can wraptext that can wraptext that can wraptext that can wraptext that can wraptext that can wraptext that can wraptext that can wraptext that can wraptext that can wraptext that can wraptext that can wrap</div>
</div>
  
  
  
</body>
</html>
​
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
repletepro
0viewers