Divide 3 divs in 3 columns without using float and flex - html

Question

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.

Answer 1

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>

Answer 2

By Default inline-block count space as a element. You can do this in two different 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>
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>

Answer 3

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>

Answer 4

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

Answer 5

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>

Answer 6

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.
Width:33% is not working in 1366 screen resolution. So here you must need to use width:32.90% either 32%

Answer 7

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

Answer 8

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>

Answer 9

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 :
I hope will be helped you.

Answer 10

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.

Answer 11

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