Solution 1 :

Do not use float, use flex instead like this:

.cover {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  flex-wrap: wrap;

.item {
  height: 100px;

.item1 {
  width: 20%;
  background-color: blue;

.item2 {
  background-color: red;

.item.item3 {
  width: 40%;
  background-color: green;
<div class="cover">
  <div class="item item1"></div>
  <div class="item item1 item2"></div>
  <div class="item item3"></div>

Problem :

I have created following css code to create three equal columns that floats next to each other.

.column {
  float: left;
  width: 33.33%;
  padding: 10px;
  height: 100px; 

now I need to create 1st column with 20% and other two with 40% width dimentions, then how could I do this with css?


Comment posted by Temani Afif

by changing the 33.33% to 20% and to 40%

Comment posted by Elman Huseynov

Does my answer helps you?