CODEWITHSUNDEEP
htmlcss
Udara Herath
Udara Herath

Reputation: 885

CSS: Add element to middle of float

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. enter image description here

Any help highly appreciate. Thanks,

Upvotes: 1

Views: 1148

Answers (3)

k2snowman69
k2snowman69

Reputation: 1929

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>

Upvotes: 0

Rohit Bind
Rohit Bind

Reputation: 113

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;
}

Upvotes: 0

Md. Nasir Uddin Bhuiyan
Md. Nasir Uddin Bhuiyan

Reputation: 1596

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>

Upvotes: 1

Related Questions