Two divs aligned vertically next to an image

Question

I want to have an avatar image with two divs on its right that are vertically aligned to it.

https://jsbin.com/qafiroquve/1/edit?html,css,output

I've read so many posts about this, but none of them seems to help me.

What is the best approach to having the image on the left with 30% of the main div's (header) width, and the info div with 70% of it?

If either of the info divs (name or position) has too much text, I want the info div to get vertically aligned to the image on its left. I also want this info div to have a margin with the image.

I've tried so many options: float: left on avatar div, display: inline-block on both avatar and info, width: 30% and 40% . I don't want to use bootstrap for this purpose as it complicates things and I want to keep it as simple as possible.

Bloodline

did not get your point? i can see 2 div left to image, then what is the issue? – Juggins

Answer 1

You can use either table-cell how @w3debugger suggested or you can take advantage of a quick css hack to align vertically:

.yourclass{
    position:absolute;
    top: 50%;
    transform: translateY(-50%)
}

But that needs the parent of .yourclass to be position:relative and be of type display:block; If your parent is block it will take the height of the block that is inside it, so the avatar, that is next to .yourclass needs to be display:block as well,

I edited your example:

HTML:

<div class="header">
    <div class="avatar">
      <img src="http://i.imgur.com/pBcut2e.jpg" />
    </div><div class="info">
        <div class="name">Important person here </div>
        <div class="position">CHIEF DIGITAL STRATEGIST &amp CO-FOUNDER</div>
    </div>
</div>

CSS:

.header {
    width: 500px;
    background: aqua;
    margin: 0 auto;
    padding: 10px;  
    position: relative;
}
.avatar img {
  width: 30%;
  border-radius: 50%;
}
.info{
  box-sizing: border-box;
  padding: 0 40px;


  width: 70%;

  position:absolute;
  right: 0;

  vertical-align: top;
  top: 50%;
  transform: translateY(-50%)

}

Live preview:

https://jsbin.com/gogewefizo/1/edit?html,css,output

Poetaster

Answer 2

Unfortunately, vertical-align didn't work with float elements. You should use display: table-cell or `display: inline-block in order to meet your requirements.

Please check the code below.

.header {
  width: 500px;
  background: aqua;
  margin: 0 auto;
  padding: 10px;
  display: table;
}
.avatar img {
  width: 150px;
}
.avatar,
.info {
  display: table-cell;
  vertical-align: middle;
}

<div class="header">
  <div class="avatar">
    <img src="http://i.imgur.com/pBcut2e.jpg" />
  </div>
  <div class="info">
    <div class="name">Important person here</div>
    <div class="position">CHIEF DIGITAL STRATEGIST &amp CO-FOUNDER</div>
  </div>

</div>

Erleena