How to center one div inside a container div which has another div inside floating at rigth side?

Asked Oct 24 '20 at 09:27

Active Oct 24 '20 at 19:12

Viewed 22 times

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>

edited Oct 24 '20 at 19:12

asked Oct 24 '20 at 09:27

Javier Haro

1,255
9
14

please check https://codepen.io/adyou2/pen/YzWNLrb – Eliot Alderson Oct 24 '20 at 09:45
your code is working well !! – Eliot Alderson 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

How to center one div inside a container div which has another div inside floating at rigth side?

0 Answers0