0

I want the yellow div centered. I need to achieve it using CSS only and not modyfing the layout.

A mandatory requirement is also not to use CSS Positioning Properties or Flex or Grid Loyouts.

Here you have an example page:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Example</title>
  </head>
  <body>
  <style>
    .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;
    }
  </style>
    <div class="c">
        <div class="a"><span>I WANT THIS CENTERED ON BLUE CONTAINER</span></div>
        <div class="b"><span>I LIKE THIS AT RIGHT SIDE OF BLUE CONTAINER</span></div>
    </div>
  </body>
</html>
Javier Haro
  • 1,255
  • 9
  • 14
  • please check https://codepen.io/adyou2/pen/YzWNLrb – AdDev Oct 24 '20 at 09:45
  • your code is working well !! – AdDev Oct 24 '20 at 09:46
  • I found a way by adding a fake div element idem to second div floating left and hidden using visibility:hidden at first position inside the container. But I don't know if there is a way of not to take into account the floating right element when centering de div... – Javier Haro Oct 24 '20 at 19:15

0 Answers0