Mon. Oct 2nd, 2023

[ANSWERED] html – how to Create columns that floats next to each other in css

By

Nov 20, 2022 css, html

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>
</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?

Comments

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?

By

Related Post

[ANSWERED] javascript – Locomotive Scroll not working with Vue.js when having to load images on page

Nov 20, 2022

[ANSWERED] html – How to import/veiw STL files in a wordpress website?

Nov 20, 2022

[ANSWERED] javascript – How to handle repeating values in JQuery

Nov 20, 2022