title: How to center one div inside a container div which has another div inside floating at rigth side?
body: <p>I want the yellow div centered. I need to achieve it using CSS only and not modyfing the layout.</p>
  <p>A mandatory requirement is also not to use CSS Positioning Properties or Flex or Grid Loyouts.</p>
  <p>Here you have an example page:</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;meta charset=&quot;utf-8&quot;&gt;
      &lt;title&gt;Example&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
    &lt;style&gt;
      .c {
          background-color:blue;
          text-align:center;
          padding:1em;
      }
      .a {
          background-color:yellow;
          display: inline-block;
          
      }
      .b {
          background-color:lightgreen;
          display: inline-block;
          float:right;
          clear:both;
      }
    &lt;/style&gt;
      &lt;div class=&quot;c&quot;&gt;
          &lt;div class=&quot;a&quot;&gt;&lt;span&gt;I WANT THIS CENTERED ON BLUE CONTAINER&lt;/span&gt;&lt;/div&gt;
          &lt;div class=&quot;b&quot;&gt;&lt;span&gt;I LIKE THIS AT RIGHT SIDE OF BLUE CONTAINER&lt;/span&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>