Center element in the middle of two float elements

Question

I am developing a site that, in a given DIV, has three elements with defined width and height. These three elements are stylized according to the following rules:

.blocks-h{
    width: 320px;
    height: 150px;
    background: #DEDEDE;
    margin: auto;
}

It so happens that, of these three elements, one must be positioned to the left, one to the center and one to the right. To do this I set a style responsible for aligning left or right any elements of my page:

.left{
    float: left;
}

.right{
    float: right;
}

My HTML is as follows:

<div class="blocks-h left"></div>
<div class="blocks-h"></div>
<div class="blocks-h right"></div>

This is the result I’m getting with the rules described above:

As you can see, the div positioned on the right is being "pushed" down. This is happening because the block style has no definition of flotation. And you can’t have it, because it doesn’t make sense, semantically speaking, to set float to an element that shouldn’t "float". This is why I created the classes . left and . right.

If I change the order of the Divs in my HTML, I have the expected result:

<div class="blocks-h left"></div>
<div class="blocks-h right"></div>
<div class="blocks-h"></div>

But, again, I will be writing a code whose semantics make no sense, since the second element displayed on the screen is the third that is defined in HTML.

Anyway. Is there any way to centralize an element that is in the middle of two others that "float", but that is correct?

I would not like to set margin for these blocks because it will make my life difficult when I create the rules of site responsiveness. And this is not the whole problem because, just below these blocks, I will have another div with FOUR elements that should be centered in the same way.

Can you help me? Thank you!

Answer 1

Friend, the theory applied on top of such boxes is the same applied in grids responsive. I made a basic example:

HTML:

<div class="mae" >
   <div class="f1" > </div>
   <div class="f1" > </div>
   <div class="f1" > </div>
</div>

CSS:

.mae {
   margin-left:-5px;
   width:200px; background:#000;
   float:left;
}

.f1 {
   float:left;
   width: calc(33.333% - 5px);
   height:50px;
   background:#e1e1e1;
   margin-left:5px;
}

.mae {
  margin-left: -5px;
  width: 200px;
  background: #000;
  float: left;
}

.f1 {
  float: left;
  width: calc(33.333% - 5px);
  height: 50px;
  background: #e1e1e1;
  margin-left: 5px;
}

<div class="mae">
  <div class="f1"></div>
  <div class="f1"></div>
  <div class="f1"></div>
</div>

The negative margin on the mother div is to compensate for the margin-left of the first div f1, so even already solve your problem in the issue of responsiveness (as it can set a fixed width for the mother div or in percentage and align it with margin: 0 auto; for example). The only thing you will define is the distance you want to have between the Divs.

I hope I’ve helped.