CODEWITHSUNDEEP
htmlcss
rajini raja
rajini raja

Reputation: 99

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

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

Upvotes: 3

Views: 2302

Answers (8)

Gaurav Arora
Gaurav Arora

Reputation: 121

<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

Upvotes: 1

AllJs
AllJs

Reputation: 1810

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>

Upvotes: 3

Sindhoor
Sindhoor

Reputation: 558

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

Upvotes: 1

Sam
Sam

Reputation: 501

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>

Upvotes: 1

Gokul P P
Gokul P P

Reputation: 962

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>

Upvotes: 2

grinmax
grinmax

Reputation: 1855

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

Upvotes: 2

amansoni211
amansoni211

Reputation: 929

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
}

Upvotes: 3

Momin
Momin

Reputation: 3320

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>

Upvotes: 1

Related Questions