5

I tried by using display inline-block to achieve 3 columns but 3rd column comes at separate row:

.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>

Not able to figure out the reason.

Santhoshkumar
  • 780
  • 1
  • 16
  • 36
Tushar Khanna
  • 428
  • 6
  • 22

11 Answers11

3

I dont know this is exactly what you need , i have remove the default whitespace of the inline-block using font-size:0 and add box-size property you dont need to change the width 33.3% to 33% the 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>
Jishnu V S
  • 8,164
  • 7
  • 27
  • 57
  • What if I have to give some margin-right of 5px to each column class and still want to achieve in a single row. I mean divide rest of the space in 33.33% for each column. – Tushar Khanna Jul 21 '17 at 05:43
  • if you need to set `margin-right` to this div then you need to decrease the div width , other wise you need to set padding to `.coloum` class and add a new div inside the `.coloum` class – Jishnu V S Jul 21 '17 at 05:46
  • @JishnuVS , you change `font-size:0`? why? – Ehsan Jul 21 '17 at 05:48
  • `display:inline-block` have default white-space., We need to remove the space that's why, we have other options remove white space – Jishnu V S Jul 21 '17 at 05:54
1

By Default inline-block count space as a element. You can do this in two different ways:

  1. 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>
  1. Method Removing extra Space

*,*: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>

As per your comment you want margin-right:5px and achieve same thing. for this you can use width in calc format. 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>
Super User
  • 9,448
  • 3
  • 31
  • 47
  • What if I have to give some margin-right of 5px to each column class and still want to achieve in a single row. I mean divide rest of the space in 33.33% for each column. – Tushar Khanna Jul 21 '17 at 05:41
  • 1
    @TusharKhanna check updated answer for `margin-right:5px` solution. – Super User Jul 21 '17 at 07:10
1

Use Table for it, 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>
Dhruvang Gajjar
  • 568
  • 1
  • 8
  • 20
1

By default browser renders a gap between two div which are positioned inline.

Making the parent width:100%, and children width:33.33% will not make children fit in the parent, because DOM calculates the gap between child div.

To make the child div fit the parent, you need to modify the width smaller than 33.33%.

If you still want to use 33.33% width. Try this

Link For reference

Unexpected gap between div inline-block

hope this helps..

Chandra Shekhar
  • 3,550
  • 2
  • 14
  • 22
1

One simple way to solve this issue is to set the .wrapper to display: table; and set its children to display: table-cell;. See the example below for the outcome.

.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>
Roy
  • 7,811
  • 4
  • 24
  • 47
0

If you are working in bigger screen like (1600,1920) then please use media query. And nothing to do any changes in margin and other as well.

Please update this property

For < 1366 screen resolution use this css

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

For > 1366 width:33% is working

in .column class

width: 33%;

So column class look like

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

Because it's 1px border surrounded to div.And their is default Margin:8 to body tag. enter image description here

Width:33% is not working in 1366 screen resolution. So here you must need to use width:32.90% either 32% enter image description here

Emipro Technologies Pvt. Ltd.
  • 14,598
  • 5
  • 45
  • 75
0

Do change in Width and add Box-Sizing 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;
}
Abhishek Pandey
  • 13,302
  • 8
  • 38
  • 68
Karthik Karuppasamy
  • 52
  • 5
0

Try keeping the div in one line in your editor.

<div class="wrapper">
  <div class="column">abc</div><!--
  --><div class="column">def</div><!--
  --><div class="column">ghi</div>
</div>
Jishnu V S
  • 8,164
  • 7
  • 27
  • 57
Jacky Lau
  • 665
  • 5
  • 21
0

You can use flex, flex is very good to make responsive div. It's a simple example.

--- HTML ----

<div class="flex-wrapper">
  <your-element class="item"> 1 </your-element>
  <your-element class="item"> 2 </your-element>
  <your-element class="item"> 3 </your-element>
</div>

--- CSS ---

.flex-wrapper {
  display: flex;
  flex-wrap: wrap;  // if you want to lots of items, will be wrapped
}
.item {
  width: 33.3%;
}

and if your items have margin, you can calculate that like this.

.item {
  margin: 5px;
  width: calc(33.3% - 10px);
}

Example : enter image description here

I hope will be helped you.

DarkHorse
  • 339
  • 4
  • 16
-1

Use the following properties to your column class

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

Reason

  • float:left; property will align your div's on left hand side

  • width:32%; property will give width of 32 % instead of 33.33% as
    1px you are assigning to border, which needs to be accommodated from the width itself.

  • margin-left:4px; property will add spacing between divs, this is for nicety.

Puneet
  • 325
  • 1
  • 12
-3

Your column class needs a couple of 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;
  }
Andrew
  • 375
  • 2
  • 12