Using Display Inline-Block Columns Move Down

Using display inline-block columns move down

You should add vertical-align: top; CSS declaration to align the columns vertically at the top:

.cont span {
    display: inline-block;
    vertical-align: top;     /* Vertically align the inline-block elements */
    height:100%;
    line-height: 100%;
    width: 33.33%;           /* Just for Demo */
    outline: 1px dashed red; /* Just for Demo */
}

Here is a online demo.

Honestly, I'm not a fan of using inline-block to create columns on the page, because of the white spaces between them.

The float was being used for a while, but nowadays flex box or CSS grid can be an option.

Display inline-block pushes my text up and down.

Add vertical-align to the element that is inline-block.

#Box_button{
height:300px;
width:300px;
background-color:#4286f4;
margin:15px 15px;
display: inline-block;
vertical-align: middle;
}

On a side note, id should be unique on the page. You might want to change the box_button to be a class.

css display: inline-block for 3 column

Set vertical-align: top to your column elements.

section.second-column, section.third-column, section.first-column {
  border: 2px brown solid;
  display: inline-block;
  height: 450px;
  vertical-align: top;
}

You can read more about vertical-align here and here

How to make 2 blocks div go in a row

We can use flex (by default flex-direction is row so we don't need any other styling in css) -:

<div class="container">
    <div>
      <h1>Block1</h1>
    </div>
    <div>
        <h1>Block2</h1>
    </div>
</div>


.container{
    display: flex;
}

Also this is one way of doing things, flex is not supported everywhere so you can go for inline-block also -:

<div>
    <div class="inline">
      <h1>Block1</h1>
    </div>
    <div class="inline">
        <h1>Block2</h1>
    </div>
</div>

.inline{
    display: inline-block;
}

display inline-block. How to prevent pushing the block to the new line?

The outer div just needs the css property white-space: nowrap;

See the jsfiddle.

HTML - keep inline-block elements from dropping down

The problem you're having is because you are setting their width in percent yet you define those margins in px which will eventually won't have a total of width of 100% when you scale down.

To fix this, you have to do the following:

Change this :

.col_left {
    float: left;
    width: 66.3%; 
    max-width: 690px;
}

.col_right {
    display: inline-block;
    width: 32.1854%;
    background-color: red;
    height: 1070px;
    max-width: 336px;
}

To:

.col_left {
    float: left;
    width: calc(67% - 9px); 
    max-width: 690px;
}

.col_right {
    display: inline-block;
    width: calc(33% - 9px);
    background-color: red;
    height: 1070px;
    max-width: 336px;
}

The reason I use :

calc(33% - 9px); and width: calc(67% - 9px); 

is because the margin-left is 18px so we have to divide it by two.

Also when doing an inline-block take note that if you format your structure like below, you will have a space between them because of the newline:

<div class="col_left_bot">box1</div>
<div class="col_left_bot margin_18left_18bot">box2</div>

To fix that, get rid of the newline. It will get ugly, but it will do the trick

<div class="col_left_bot">box1</div><div class="col_left_bot margin_18left_18bot">box2</div>

Update to give further explanation regarding the issue on percentage with a margin set as px

Let's say you have 100px container and 49% width on 2 elements with 2px margin.

Let's compute :

100 * .49 x 2 + 2 = 100 // correct for this scale

But what if the container scales down to 50px?

Computation :

50 * .49 x 2 + 2 = 51 // it doesn't total to 50px

Which is why your other elements go down when the container scales down.

Fiddle

How does vertical-align of one inline block affect its neighboring inline blocks?

I've created a modified example of yours so we can see exactly why this happens.
I've added a wrapper div to see exactly the edges of the lines we're aligning items to.

I've also left all items with no vertical-align assigned, and if you click on one, it removes the property from its siblings and adds vertical-align: bottom to the one you've clicked.

We can see that the reason is that your original p which now is my p.big takes up the full height of the container line, so there's nothing really to align. When you apply vertical-align to it, then it affects all of its siblings on the line to take on that value as well.

Otherwise, it behaves accordingly as the documentation, it aligns itself relative to the line, and doesn't affect any other element but itself.

$(document).ready(function(){ $('span, .el, p').click(function(e){   $('span, .el, p').removeClass("v-bottom");    $(this).addClass("v-bottom");  })})

.wrapper{  border-top:1px dashed;  border-bottom:1px dashed;}span,div.el,p{  padding: 0;  margin: 0;  line-height: 1;}
span {  height: 50px;  width: 75px;  background: green;  display: inline-block;}
div.el {  height: 100px;  width: 50px;  background: yellow;  display: inline-block;}
p.big {  height: 200px;  width: 200px;  background: blue;  display: inline-block;}p.small {  height: 50px;  width: 100px;  background: red;  display: inline-block;}
.v-bottom{  vertical-align: bottom;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div class="wrapper">
<span>span1</span><div class="el">div1</div><p class="big">paragraph A</p><p class="small">paragraph A</p></div>