How to create a circle and a panel overlapping with css?

Question

For the user profile, I am trying to create a circular image plus a horizontal strip with the same height as the image. In addition, he must respond. It should look like the image below. There will be text in a black strip.

Can someone please help me with the correct CSS?
So far I have the code below, but this is already going wrong, because the black bar is below the circle, and not next to it. But I also don’t know how to make the black bar start exactly in the middle of the image, so that the image is on top and the text in the black bar starts right enough (while reacting to the screen size).

<div class="col-md-12 profile-topbar"> <div class="round"> <img src=<%= image_path('profile.gif') %>> </div> <div class="text-bar"> ... </div> </div> 

In my CSS file:

 .round { margin: 2em; border-radius: 50%; overflow: hidden; width: 150px; height: 150px; -webkit-border-radius: 50%; -moz-border-radius: 50%; box-shadow: 0 0 8px rgba(0, 0, 0, .8); -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .8); -moz-box-shadow: 0 0 8px rgba(0, 0, 0, .8); } .round img { display: block; width: 100%; height: 100%; } .text-bar { display: inline-block; background: #FFF; left: 222px; //Problem: not responsive. This block should start exactly halfway from the image. width: 100%; } .text-bar p { left: 250 px; } 

Answer 1

you can use figure and figcaption to structure your html.

Inline-block , vertical-align and margin to lay text in text

 figure { margin-left:50px;/* half image width */ background:black; box-shadow:0 0 1px; border-radius:3px; } img { border-radius:100%; position:relative;/* brings it at front, can trigger z-index too */ box-shadow:-1px 0 1px, 1px 0 1px white ;/* whatever U like */ vertical-align:middle; right:50px;/* move visually from real position */ margin-right:-40px;/* pull or push text aside */ } figcaption { display:inline-block; vertical-align:middle; color:white; } p { margin:0; } 

 <figure> <img src="http://lorempixel.com/100/100/people/9" /> <figcaption> <p>some text here 10px away from image</p> <p>and more</p> </figcaption> </figure> 

Answer 2

The idea is (1) to set margin-left:50px on the container and margin-left:-50px on the avatar inside. (2) set the bio as a table, so we can use the vertical alignment function for the middle of the text.

JSFIDDLE DEMO

 body { background: silver; } .user { height: 100px; background: #222; margin-left: 50px; } .avatar { float: left; width: 100px; height: 100px; border-radius: 50%; box-shadow: 0 0 8px rgba(0, 0, 0, .8); margin-left: -50px; } .bio { display: table; height: 100px; color: #fff; } .bio p { display: table-cell; vertical-align: middle; padding-left: 10px; margin: 0; } 

 <div class="user"> <img class="avatar" src="http://i.imgur.com/9pnkFjf.jpg" /> <div class="bio"><p>John Doe is an anonymous character.</p></div> </div> 

Answer 3

You forgot to completely position the title bar.

http://codepen.io/fontophilic/pen/LVzbVM?editors=110

I use SCSS in my pen, but here is the compiled css:

 .round { margin: 2em; overflow: hidden; width: 150px; height: 150px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.8); -moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.8); box-shadow: 0 0 8px rgba(0, 0, 0, 0.8); } .round img { display: block; width: 100%; height: 100%; } .text-bar { display: block; margin: 2em; position: absolute; background-color: #000; left: 75px; top: 0; width: 100%; height: 150px; z-index: -1; } .text-bar p { position: relative; left: 75px; color: white; } 

Answer 4

 <div class="circle"> </div> html,body{ width:100%; height:100%; } .circle{ border-radius:50%; width:3em; height:3em; background-color: red; } .circle:before{ margin-left: 1.5em; content: " "; display: block; position: relative; background: black; height: 3em; width: 500%; z-index:-1; } 

http://codepen.io/sajrashid/pen/yNzVJz