creating a wrapper of similar to ID card - html

Question

I am struggling with creation of a collection of elements wrapped inside a single one. I made a sketch of what i was trying to create.
The HTML would look like this:
<div class="wrapper-1">
<div class="image"></div>
<h3 class="title">HEY NOW</h3>
<p class="text">you a rock star, hey now! You are a rock star</p>
</div>
What would be the best way to create such a wrapper?

Answer 1

I would prefer to create two columns as .left-side and .right-side inside the main wrapper and add the contents to the these columns as following:
<div class="wrapper-1">
<div class="left-side">
<div class="image"></div>
</div>
<div class="right-side">
<h3 class="title">HEY NOW</h3>
<p class="text">you a rock star, hey now! You are a rock star</p>
</div>
</div>
Here is the fully implemented version:
.wrapper-1 {
width: 400px;
height: 100px;
}
.left-side {
float: left;
width: 100px;
height: 100px;
margin-right: 15px;
}
.left-side > .image {
background: url(http://placehold.it/100x100) no-repeat center center;
width: 100px;
height: 100px;
margin-right: 10px;
}
.right-side {
float: left;
width: 285px;
height: 100px;
}
.right-side > .title {
margin: 0;
}
<div class="wrapper-1">
<div class="left-side">
<div class="image"></div>
<img src="" alt="">
</div>
<div class="right-side">
<h3 class="title">HEY NOW</h3>
<p class="text">you a rock star, hey now! You are a rock star</p>
</div>
</div>

Answer 2

How about this, using flexbox
.wrapper-1 {
display: flex;
}
.wrapper-2 {
display: flex;
flex-direction: column
}
.wrapper-1 .image {
width: 100px;
height: 100px;
background: url(http://placehold.it/100/00f);
margin-right: 10px;
}
<div class="wrapper-1">
<div class="image"></div>
<div class="wrapper-2">
<h3 class="title">HEY NOW</h3>
<p class="text">you a rock star, hey now! You are a rock star</p>
</div>
</div>
And if you can't change markup, use position: absolute
.wrapper-1 {
padding-left: 110px;
box-sizing: border-box;
}
.wrapper-1 .image {
position: absolute;
left: 0;
top: 0;
width: 100px;
height: 100px;
background: url(http://placehold.it/100/00f);
}
<div class="wrapper-1">
<div class="image"></div>
<h3 class="title">HEY NOW</h3>
<p class="text">you a rock star, hey now! You are a rock star</p>
</div>

Answer 3

Here is a complete solution:
HTML:
<div class="wrapper clearfix">
<div class="left">
<img src="img.png">
</div>
<div class="right">
<h3>text</h3>
<p>text text</p>
</div>
</div>
CSS:
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html .clearfix { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */
.wrapper {
box-sizing: border-box; /* makes padding go on the inside */
padding: 10px; /* gives interior padding */
width: 1170px; /* whatever width you want the container to be */
margin: 0 auto; /* center it */
background-color: #fff;
}
.left {
width: 20%; /* whatever width you want the left side to be, stick to percentages */
float: left;
}
.left img {
width: 100%;
height: auto;
}
.right {
width: 77%; /* whatever width you want the right side to be, stick to percentages, notice that 77% and 20% dont add up to 100%, this is to account for the small gap inbetween the divs */
float: right;
}
Note: "clearfix" is used when floating things left and right. It prevents the common error where the div collapses in itself when child divs are being floated.
working jsfiddle: here