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>
<html>
<head>
<meta name="description" content="This shows how to do left-right alignment without using floats in a way that both fits into parent containers as well as can be vertically aligned to it's left and right components." />
  <meta charset="utf-8">
  <title>Floatless Alignment</title>
</head>
<body>
​
    <div class="left-right">
      <div class="left">
        <p>Paragraph 1</p>
      </div>
      <div class="right">
        <p>Paragraph 1</p>
        <p>Paragraph 2</p>        
      </div>
    </div>
​
    <hr/>
      <div class="left-right vmiddle">
      <div class="left">
        <p>Paragraph 1</p>
      </div>
      <div class="right">
        <p>Paragraph 1</p>
        <p>Paragraph 2</p>        
      </div>
    </div>
​
      <hr/>
      <div class="left-right vbottom">
      <div class="left">
        <p>Paragraph 1</p>
      </div>
      <div class="right">
        <p>Paragraph 1</p>
        <p>Paragraph 2</p>        
      </div>
    </div>
​
  
</body>
</html>
 
    div.left-right {
      box-sizing: border-box;
      display: inline-block;
      font-size: 0;
      position: relative;
      white-space: nowrap;
      width: 100%;
    }
​
    div.left-right div.left,
    div.left-right div.right {
      box-sizing: border-box;      
      display: inline-block;
      font-size: initial;
      position: relative;
      white-space: normal;
      width: 50%;
      vertical-align: top;
    }
​
    div.left-right.vmiddle div.left,
    div.left-right.vmiddle div.right {
      vertical-align: middle;
    }
​
    div.left-right.vbottom div.left,
    div.left-right.vbottom div.right {
      vertical-align: bottom;
    }
​
    div.left-right div.left {
      background: firebrick;
      text-align: left;
    }
​
    div.left-right div.right {
      background: forestgreen;
      text-align: right;
    }
​
Output 300px

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

Dismiss x
public
Bin info
nyteshadepro
0viewers