user3626048 user3626048 - 6 months ago 17
HTML Question

Text centered in div with another div on left with right border

Sorry but I didn't know how to describe post title.
I would like to achieve something like in screenshot using html/css:

screen

It's gonna be some kind of title/header for my columns.
I would like ABC be centered vertically and horizontally in blue border. Also red dot (I want to put there small img) should be centered vertically and there should be 1px thick gray line on right side of image.
How to do that?

I've tried something like this but line is too short:

<div style="background: #75d0ff;">

<div style="border-right: 1px solid gray; padding: 20px; display: inline; height: 100%;">
<img src="css/img/dot.png">
</div>

<div class="border-content" style="display: inline">
<p class="text-center">ABC</p>
</div>
</div>

Answer

I think this would be the right way:

#container {
  position: relative;
  text-align: center;
  height:50px;
  background-color: #67CDFB;
  width: 200px;
}

#textPusher {
  width: 100%;
  height:35%;
}
#imgContainer{
  width: 20%;
  height: 100%;
  position: absolute;
  top:0;
  border-right:1px solid red;
}

#imgContainer img{
  position: absolute;
  top: 10px;
  left: 10px;
  width:calc(100% - 20px);
  height: calc(100% - 20px);

}
<div id="container">
  
  <div id="textPusher"></div>
  <div id="textContainer">abc</div>
  <div id="imgContainer"><img src="http://lorempixel.com/400/200/" alt=""></div>
  
  
  
</div>