CSS parent and child elements on the same line

Question

I am trying to keep my parent and child elements on the same line.

The structure of the website is this:

 .about_me_pic { width: 200px; height: 270px; display: inline-block; vertical-align: top; } .about_me { width: 700px; height: 1000px; display: inline-block; vertical-align: top; } 

 <div class="about_me_pic"> <img alt="hmmm" src="/assets/jack_and_mom.png"> <div class="about_me"> <i class="fa fa-hand-spock-o">Hi, my name is Jack Burum</i> </div> </div> 

In this scenario the about_me_pic is sitting on to of the about_me content and I want them to be in-line with one another.

Answer 1

Instead of being parent/child make them siblings, and because you are using display: inline-block careful with the whitespace that it creates. See snippet below:

Snippet

 * { margin: 0; padding: 0 } #wrap { width: 1033px; font-size: 0 /*fix inline-block gap*/ } .about_me_pic { width: 333px; height: 337px; display: inline-block; vertical-align: top } .about_me { width: 700px; height: 1000px; display: inline-block; vertical-align: top; font-size: 16px; background:lightblue /*demo */ } 

 <div id="wrap"> <div class="about_me_pic"> <img alt="hmmm" src="//lorempixel.com/333/337"> </div> <div class="about_me"> <i class="fa fa-hand-spock-o">Hi, my name is Jack Burum</i> </div> </div> 

Answer 2

You need to place .about_me outside .about_me_pic and maybe set a smaller width/height (if the total width is larger then the line, the second element will go in the next line.

 .about_me_pic { width: 103px; height: 137px; display: inline-block; position: relative; } .about_me { width:180px; height: 100px; display: inline-block; margin-left: 50px; } 

 <div class="about_me_pic"> <img alt="hmmm" src="http://www.w3schools.com/tags/smiley.gif"> </div> <div class="about_me"> <i class="fa fa-hand-spock-o">Hi, my name is Jack Burum</i> </div> 

Hope it helps.