Unable to put two divs on same line using inline-block - html

Question

I am trying to place two divs on same line.
<div id="page">
<div id="first-box">
</div>
<div id="second-box">
this is second box
</div>
</div>
css
div#page {
background-color: slategrey;
width: 960px;
height:900px;
margin: 20px;
padding:20px;
border:4px solid blue;
}
div#first-box{
width:200px;
height:200px;
display:inline-block;
border:1px groove black;
}
div#second-box{
display:inline-block;
width:200px;
height:200px;
padding:10px;
border:1px solid green;
}
it place itself in same line when I use vertical-align:top in the second-box. But why it behave like that? Thanks
http://codepen.io/rajinirajadev/pen/xgBVab

Answer 1

add this line in your second-box's css:
div#second-box{
display:inline-block;
width:200px;
height:200px;
padding:10px;
border:1px solid green;
vertical-align: top; // add this line
}

Answer 2

Short and Sweet
My solution is very simple; I use less CSS, and the secret of aligning both DIV is to simply add display: inline-flex; to your #page DIV.
Below is the full code:
HTML
<div id="page">
<div id="first-box">
This is the first box
</div>
<div id="second-box">
this is second box
</div>
</div>
CSS
body{
background:grey;
color:white;
}
#page{
padding:20px;
display: inline-flex;
display: -webkit-inline-flex; /* Safari */
}
#first-box, #second-box{
width:200px;
height:150px;
border: 1px solid black;
padding:10px
}
#second-box{
border: 1px solid green;
}
Click HERE for a working CODEPEN
[UPDATE: 09/13/2020] IF YOU WANT TO USE CSS-GRID RATHER THAN INLINE-FLEX
#page2{
padding:20px;
display: grid;
grid-template-columns:repeat(auto-fill, minmax(200px, 1fr) ) ;
}
#first-new-box, #second-new-box{
height:150px;
border: 1px solid black;
padding:10px
}
#second-new-box{
border: 1px solid green;
}
<div id="page2">
<div id="first-new-box">
This is the first new box
</div>
<div id="second-new-box">
this is the second new box
</div>
</div>

Answer 3

Try this code
div#first-box{
width:200px;
height:200px;
display:inline-block;
border:1px groove black;
float: left;
}
live demo - http://codepen.io/anon/pen/YNgqRN

Answer 4

while adding contents to the first block also it works fine
div#page {
background-color: slategrey;
width: 960px;
height:900px;
margin: 20px;
padding:20px;
border:4px solid blue;
}
div#first-box{
width:200px;
height:200px;
display:inline-block;
border:1px groove black;
}
div#second-box{
display:inline-block;
width:200px;
height:200px;
padding:10px;
border:1px solid green;
}
<div id="page">
<div id="first-box">
this is first box
</div><div id="second-box">
this is second box
</div>
</div>

Answer 5

Try this ..
div#page {
background-color: slategrey;
width: 960px;
height:900px;
margin: 20px;
padding:20px;
border:4px solid blue;
}
div#first-box{
width:200px;
height:200px;
display:inline-block;
border:1px groove black;
}
div#second-box{
display:inline-block;
width:200px;
height:200px;
border:1px solid green;
float:left;
}
<div id="page">
<div id="first-box">
</div>
<div id="second-box">
this is second box
</div>
</div>

Answer 6

Change display:table-cell to each id & add vertical-align:top for text to display at top but it is not important for box alignment. And you are done. Remove any floats.
div#page {
background-color: slategrey;
width: 960px;
height:900px;
margin: 20px;
padding:20px;
border:4px solid blue;
}
div#first-box{
width:200px;
height:200px;
display:table-cell;
border:1px groove black;
vertical-align:top;
}
div#second-box{
display:table-cell;
width:200px;
height:200px;
border:1px solid green;
vertical-align:top;
}
<div id="page">
<div id="first-box">
</div>
<div id="second-box">
this is second box
</div>
</div>

Answer 7

Replace Your css with below code:
Added Float:left, Position:relative, and Margin and it will not disturb you in further coding also.
div #page {
background-color: slategrey;
width: 960px;
height:900px;
margin: 20px;
padding:20px;
border:4px solid blue;
}
div #first-box{
width:200px;
height:200px;
display:inline-block;
border:1px groove black;
/* extra added 3 lines */
position: relative;
float:left;
margin:10px;
}
div #second-box{
display:inline-block;
width:200px;
height:200px;
padding:10px;
border:1px solid green;
/* extra added 3 lines */
position: relative;
float:left;
margin:10px;
}

Answer 8

<div id="page">
<div id="first-box">
<br clear="all">
</div>
<div id="second-box">
this is second box
</div>
just replace ur code with this one