0

Please consider this Codepen: http://codepen.io/anon/pen/WooLwL

There are 3 divs in one container div and the sum of all divs width is 960. However upon inspection, there is this white space around the divs that I cannot get rid of via CSS. I've confirmed the margin is 0.

<div id="columncontainer">
  <div id="column1">
    yolo
  </div>
  <div id="column2">
    <hr>
    all column 2 data here
    <hr>
  </div>
  <div id="column3">
    all column 3 data here
  </div>
</div>
Victor Fernandes
  • 386
  • 1
  • 4
  • 15
  • https://css-tricks.com/fighting-the-space-between-inline-block-elements/ – sinisake Nov 18 '16 at 06:09
  • This question has been asked a lot of times. Please do some research before posting a question on SO. Check this [**Question**](http://stackoverflow.com/questions/5078239/how-to-remove-the-space-between-inline-block-elements) for your answer. – Mohammad Usman Nov 18 '16 at 06:09

2 Answers2

0

Add

div{
  float:left;
}

which will solve inline-block problems

body{
  background-color: #ccc; // page background color
}
div{
  float:left;
}
#columncontainer {
width: 960px;
margin: 0 auto;
}

#column1 {
    display: inline-block;
    width: 240px;
    margin: 0;
    padding: 0;
  background: #b3e;
}

#column2 {
    display: inline-block;
    width: 480px;
    margin: 0;
    padding: 0;
  background: #555;
  
} 

#column3 {
    display: inline-block;
    width: 240px;
    margin: 0;
    padding: 0;
    background: #999;
}

#footer {
clear: both;
}

#image {
margin-left: auto;
}

#columncontainer {
background-color: white;
}
<h1>Inline Block Nerd Zone</h1>

<div id="columncontainer">
<div id="column1">
yolo
</div>

<div id="column2">
<hr>
all column 2 data here
<hr>
</div>

<div id="column3">
all column 3 data here
</div>
</div>
jafarbtech
  • 6,842
  • 1
  • 36
  • 55
0

You need to add float:left

div#columncontainer div {
    float: left;
    position: relative;
}

Check this codepen

Vignesh Subramanian
  • 7,161
  • 14
  • 87
  • 150