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
  • …
 
<html>
  <head>
    <style type="text/css">
      body {
        background-color:#eee;
      }
​
      #content {
        border:1px solid red;
        width:800px;
        display:block;
        background-color:white;
        overflow:hidden;
      }
​
      #header {
        border:1px solid black;
        background-color:#777;
        color:white;
        width:800px;
        left:0;
        top:0;
      }
​
      #leftcol {
        float:left;
        border:1px solid black;
        background-color:#ddd;
        width:200px;
        top:100px;
        left:0;
      }
​
      #rightcol {
        float:right;
        top:100px;
        left:205px;
        border:1px solid black;
        background-color:#ddd;
        width:500px;
      }
​
    </style>
    <title>CSS Positioning Example 1</title>
  </head>
​
  <body>
    <div id="content">
​
      <div id="header">
        <h1>The Awesome Website</h1>
      </div>
​
      <div id="leftcol">
        <h2>About</h2>
        <p>
        This website is so awesome because it was made by someone
        and that is really all there is to it.  There.
        </p>
      </div>
​
      <div id="rightcol">
        <p>This is where I'm going to put some real body text so that it goes
        on and on for a while and so I can get a sense of what happens when
        the text in the paragraph keeps going and the box containing it keeps
        going on as well.
        </p>
      </div>
​
    </div>
​
  </body>
</html>
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers