CSS: Add element to middle of float

Question

I want to add an element to middle to the panel. I'm using float: right and float:left to divide the panel. I'm not using bootstrap here.

i used clear: both; and margin: 0 auto; styles and it's not working for me. Is there any possible way to do that? I have attached a sample image that what i want.

Any help highly appreciate. Thanks,

Possible duplicate of [Horizontally center a div in a div](http://stackoverflow.com/questions/114543/horizontally-center-a-div-in-a-div) — CMartins, Jul 25 '16 at 07:39

Md. Nasir Uddin Bhuiyan · Accepted Answer · 2016-07-25T07:55:35.633

Try this this might help you.

you can simply use width 1/3 and float left to make it

and text-align: center is to center text

Basic structure

.col{
width: 33.33%;
text-align: center;

}

.left{
  float: left;
  }

<div class="col left">
something
</div>
<div class="col left">
something is here!!
</div>
<div class="col left">
something
</div>

Your design

.col{
width: 32%;
height: 300px;
text-align: center;
margin-left: .5%;
margin-right: .5%;

}

.left{
  float: left;
  }

.black{
background-color: black;
color: white;
}

.red{
background-color: red;  
}

<div class="col left black">
something
</div>
<div class="col left red">
something is here!!
</div>
<div class="col left black">
something
</div>

score 0 · Answer 2 · answered Jul 25 '16 at 08:20

There is nothing called float:center in css you just have to use float left or right and it is very important that you make the html code in tree structure.

Here is the working codepen. Code is given below.

<div class="container">
      <div class="row">
            <div class="col20 black">
                  Float : left.
            </div>
            <div class="col60 red">
                  Added Something here.
            </div>
            <div class="col20 black">
                  Float : Right.
            </div>
      </div>
</div>



*{
      box-sizing : border-box;
}
.container{
      width:800px;
      margin:0 auto;
}
.row{
      width:100%;
      text-align: center;
}
.row:after{
      clear:both;
      content:"";
      display:block;
}
.row:before{
      clear:both;
      content:"";
      display:block;
}
.col20{
      width:20%;
      float:left;
      height:200px;
}
.col60{
      width:60%;
      float:left;
      height:200px;
}
.black{
      background:#000;
      color:#fff;
}
.red{
      background:red;
      Color:#fff;
}

score 0 · Answer 3 · answered Jul 25 '16 at 08:24

Another option is if these are taking up the full width and height of the parent you could just use Flexbox layout:

.parent { display: flex; flex-direction: row; } .parent > * { flex: 1 1 auto; /* Or you can specify specific widths. I would suggest one being 1 1 auto though. */ }

<div class="parent"> <div class="left"></div> <div class="middle"></></div> <div class="right"></></div> </div>

CSS: Add element to middle of float

3 Answers3