Split 3 divs in 3 columns without using float and flex

Question

Split 3 divs in 3 columns without using float and flex

I tried to use display inline-block

to achieve 3 columns, but the third column is on a separate line:

.wrapper {
   width: 100%;
}
.column {
    display: inline-block;
    min-height: 150px;
    width: 33.33%;
    border: 1px solid black;
    min-width: 300px;
    margin-bottom: 8px;
}

<div class="wrapper">
  <div class="column">abc</div>
  <div class="column">def</div>
  <div class="column">ghi</div>
</div>

Run code Hide result

It is impossible to find out the reason.

+3

html css

Tushar khanna 21 jul. 17 at 5:13

source to share

10 answers

I don't know if this is exactly what you need, I removed the default space inline-block

with font-size:0

and added box-size property

you don't need to change the width of the 33.3% to 33%

width, please check the snippet

 .wrapper {
  width: 100%;
  font-size: 0;
}
.column {
  display: inline-block;
  min-height: 150px;
  width: 33.33%;
  border: 1px solid black;
  margin-bottom: 8px;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -moz-box-sizing: border-box;
}

<div class="wrapper">
  <div class="column">abc</div>
  <div class="column">def</div>
  <div class="column">ghi</div>
</div>

Run code Hide result

+2

Jishnu VS 21 jul. '17 at 5:30

source to share

By default, the browser displays a gap between the two divs that are on the line.

Making the parent width:100%,

and children width:33.33%

will not make the children fit the parent as the DOM calculates the difference between the child div.

To make the child div fit the parent you need to change the width to less than 33.33%.

If you still want to use 33.33% width. try it

Link For reference

Unexpected break between div-line-block

hope this helps.

+1

Chandra shekhar 21 jul. 17 at 6:14 am

source to share

One easy way to solve this problem is to set .wrapper

in display: table;

and set a meaning for your children display: table-cell;

. See example below for the result.

.wrapper {
   width: 100%;
   display: table;
}
.column {
    display: table-cell;
    min-height: 150px;
    width: 33.33%;
    border: 1px solid black;
    min-width: 300px;
    margin-bottom: 8px;
}

<div class="wrapper">
  <div class="column">abc</div>
  <div class="column">def</div>
  <div class="column">ghi</div>
</div>

Run code Hide result

+1

Roy 21 jul. 17 at 8:59 am

source to share

If you are working on a large screen such as (1600,1920) please use media query. And nothing to do any changes in the field and others.

Update this property

1366 use this css

width:32.90% //instead of 32.90% you may use width: 32%;

For> 1366 width: 33% works

in class .column

width: 33%;

So the column class looks like

.column {
        display: inline-block;
        min-height: 150px;
        width: 33%;
        border: 1px solid black;
        min-width: 300px;
        margin-bottom: 8px;
      }

Because the 1px border is surrounded by a div. And their default margin is 8 - body tag.

Width: 33% does not work in 1366 screen resolution. So here you need to use width: 32.90% or 32%

0

Emipro Technologies Pvt. Ltd. 21 jul. 17 at 5:14 am

source to share

Changing the width and adding the scale size will help you.

.column {
    display: inline-block;
    min-height: 150px;
    width: 33.1%;
    border: 1px solid black;
    min-width: 300px;
    margin-bottom: 8px;
    box-sizing: border-box;
}

0

karthi 21 jul. 17 at 5:26 am

source to share

Use a table for her, the best option

No Width, No Float

table{table-layout:fixed;width:500px;border-collapse:collapse;text-align:center;}

<table border="1">
  <tr>
    <td>A</td>
    <td>B</td>
    <td>C</td>
  </tr>
</table>

Run code Hide result

0

Dhruvang Gajjar 21 jul. 17 at 5:53

source to share

Try to keep the div on one line in your editor .

<div class="wrapper">
  <div class="column">abc</div><!--
  --><div class="column">def</div><!--
  --><div class="column">ghi</div>
</div>

0

user3711105 21 jul. 17 at 6:57

source to share

Use the following properties for the class column

.column {
        display: inline-block;
        min-height: 150px;
        width:32%;
        float:left;
        margin-left:4px;
        border: 1px solid black;
        min-width: 300px;
        margin-bottom: 8px;
      }

Cause

float:left;

property aligns your div to the left side
Property
width:32%;

will give a width of 32% instead of 33.33% as
1px you are assigning a border that should be the width itself.
margin-left:4px;

property will add spacing between divs, this is for subtlety.

-1

Puneet 21 jul. 17 at 5:22 am

source to share

Your column class needs a few minor fixes, float and width changes:

.column {
    display: inline-block;
    float: left;
    min-height: 150px;
    width: 33%;
    border: 1px solid black;
    min-width: 300px;
    margin-bottom: 8px;
  }

-3

Andrew 21 jul. 17 at 5:17 am

source to share

Super User · Accepted Answer · 2017-07-21T05:23:09+0000

By default, inline-block

counts as item. You can do this in two ways:

Method (using font size)

*,*:after,*:before {
  box-sizing: border-box;
}
.wrapper {
  width: 100%;
  font-size:0px;
}
.column {
  display: inline-block;
  min-height: 150px;
  width: 33.33%;
  border: 1px solid black;
  /*min-width: 300px;*/
  margin-bottom: 8px;
  font-size:16px;
}

<div class="wrapper">
  <div class="column">abc</div>
  <div class="column">def</div>
  <div class="column">ghi</div>
</div>

Run code Hide result

Extra Space Removal Method

*,*:after,*:before {
  box-sizing: border-box;
}
.wrapper {
  width: 100%;
}
.column {
  display: inline-block;
  min-height: 150px;
  width: 33.33%;
  border: 1px solid black;
  /*min-width: 300px;*/
  margin-bottom: 8px;
}

<div class="wrapper">
  <div class="column">abc</div><!--
  --><div class="column">def</div><!--
  --><div class="column">ghi</div>
</div>

Run code Hide result

As per your comment, you want margin-right:5px

and achieve the same. you can use formatted width for this calc

. check below snippet

*,*:after,*:before {
  box-sizing: border-box;
}
.wrapper {
  width: 100%;
}
.column {
  display: inline-block;
  min-height: 150px;
  width: calc(33.33% - 5px);
  width: -moz-calc(33.33% - 5px);
  width: -webkit-calc(33.33% - 5px);
  border: 1px solid black;
  /*min-width: 300px;*/
  margin-bottom: 8px;
  margin-right: 5px;
}

<div class="wrapper">
  <div class="column">abc</div><!--
  --><div class="column">def</div><!--
  --><div class="column">ghi</div>
</div>

Run code Hide result

Split 3 divs in 3 columns without using float and flex

More articles: