Jbur43 February 2016

CSS parent and child elements on the same line

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.

Answers


pmrotule February 2016

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.


dippas February 2016

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>

Post Status

Asked in February 2016
Viewed 3,023 times
Voted 5
Answered 2 times

Search




Leave an answer