Center element in the middle of two float elements

Question

Center element in the middle of two float elements

Navigation

#1 by (2 votes)

4

I'm 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 turns out that, of these three elements, one should 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 elements of my page:

.left{
    float: left;
}

.right{
    float: right;
}

My HTML looks like this:

<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:

Asyoucansee,thedivpositionedtotherightisbeing"pushed" down. This is happening because the block style has no float setting. And it can not even have, because it does not make sense, semantically speaking, to define float for an element that should not "float". For this I created the .left and .right classes.

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'll be writing a code whose semantics do not make sense, since the second element displayed on the screen is the third one 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 this will make my life difficult when I create the site responsiveness rules. And this is not even the problem because, just below these blocks, I will have another div with FOUR elements that should be centralized in the same way.

Can you help me? Thanks!

html css

asked by anonymous 07.10.2015 / 22:33

1 answer

getUserMedia has now been deprecated on non-https connections? Open camera inside a div [Ionic]

score 2 · Accepted Answer

Friend, the theory applied on top of boxes is the same as that applied to grids . 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 in the parent div is to compensate for margin-left of the first div f1 , so even solve your problem on responsiveness (since you can set a fixed width for the div or the parent div 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 have helped.