Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div class="topic">
    <header class="topic-header">Header</header>
    <section class="topic-content">
      <div class="topic-user-info">User Info</div>
      <article class="topic-body">
        <div class="topic-message">
          <p>Message</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed et deleniti rem, odio sit perspiciatis quasi dignissimos repellat inventore sequi cupiditate vel quam, asperiores nisi magni, quaerat at autem id dolorem! Dolor, nobis! Fuga nisi aut deserunt in delectus nam quidem ea asperiores, animi nihil. Delectus, ab nisi. Possimus, laborum quos impedit atque eius ex ab enim a amet omnis ullam totam facere sed necessitatibus aut nihil reprehenderit sequi optio doloremque rerum voluptatum ea adipisci minus, molestias modi. Numquam iste, ducimus consequatur deleniti dolores explicabo. Doloremque odio placeat deleniti ipsam consequatur beatae eius doloribus reiciendis ut sit unde distinctio modi voluptates expedita sint ad, earum asperiores aliquid est architecto autem in, quibusdam officiis! Distinctio, eos quaerat, id illum aliquam aut.</p>
        </div>
        <aside class="topic-signature">
          <p>Signature</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti delectus laudantium minima magni temporibus distinctio, aut modi saepe deserunt praesentium eligendi qui quod, ratione omnis exercitationem officiis repellendus adipisci eum molestias vitae, sed. Atque dicta in veniam ducimus voluptatem quasi accusantium, temporibus esse, aliquid itaque explicabo omnis, delectus expedita rem.</p>
        </aside>
      </article>
    </section>
  </div>
</body>
</html>
 
.topic {
  width: 100%;
  border: 1px solid #444;
}
.topic-header {
  width: 100%;
  height: 40px;
  background-color: #CD422B;
}
.topic-content {
  padding-left: 180px;
  position: relative;
  box-sizing: border-box;
  width: 100%;
  
  color: white;
}
.topic-user-info {
  position: absolute;
  width: 180px;
  height: 100%;
  left: 0;
  
  background-color: #444;
  
  text-align: center;
}
.topic-body {
  width: 100%;
  background-color: #323232;
}
.topic-message,
.topic-signature {
  padding: 10px;
  box-sizing: border-box;
}
.topic-message {
  min-height: 180px;
}
.topic-signature {
  min-height: 120px;
  border-top: 1px dashed #444;
}
Output

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

Dismiss x
public
Bin info
Oka-pro
0viewers