JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<body>
  <p>In Firefox, if the 'header' div is not self-collapsing the wide green box avoids the content box of the div with the green image. WebKit, IE and Opera do the same.</p>
  <div id="header">
     <h1 id="logo" class="single right"></h1>
  </div>

  <div id="sidebar" class="single right">
      <img src="http://trac.webkit.org/export/144230/trunk/LayoutTests/fast/css/resources/greenbox-100px.png" width="61" height="95"/>
  </div>

  <div id="content" class="triple">
      <img src="http://trac.webkit.org/export/144230/trunk/LayoutTests/fast/css/resources/greenbox-100px.png" width="590" height="110"/>
  </div>
</body>

CSS

<style>
    body {
      width: 810px;
    }

    div {
      border: 1px solid #425874;
    }

    .right {
      float: right;
    }

    .single {
      width: 200px;
    }
    .triple {
      width: 600px;
    }

    #header #logo {
      width: 190px;
      height: 41px;
    }

    #header{
      width: 190px;
      height: 41px;
    }

    #sidebar {
      clear: right;
      margin-left: 22px;
    }
</style>