Image and text in one row aligned and responsive - html

Question

I am trying to accomplish
IMG + text in one row, like in this example
I would like the image to be responsive somehow... so when I resize the window, the image remains there, but also text with background...
Also, I need the text to be vertically aligned... any ideas?
Any help is greatly appreciated! thanks

Answer 1

This may help you, later you can control with media-queries and place your image or content wherever you want.
.img-text {
width: 100%;
display: table;
table-layout: fixed;
}
.photo,
.content {
display: table-cell;
vertical-align: middle;
}
.photo {
width: 40%;
}
.photo img {
max-width: 100%;
height: auto;
}
.content {
width: 60%;
padding: 15px;
}
<div class="img-txt">
<div class="photo">
<img src="http://lorempixel.com/image_output/people-q-c-640-480-6.jpg" alt="">
</div>
<div class="content">
<h1>Something</h1>
<p>Something more</p>
<p>You should have tried yourself first, then asked with your code as example</p>
</div>
</div>

Answer 2

It would be really good if you had posted some of your code. I have already done a similar example, which I would like to share. You need to use positioning for this case. This is a case of fixed-fluid:
+-------+-----------+
| FIXED | FLUUUUUID |
+-------+-----------+
Or
+-------+-----------+
| FIXED | FLUUUUUID |
| | FLUUUUUID |
+-------+-----------+
Fixed-Fluid Model. In my snippet, I have demonstrated two kinds of examples. In the first case, the fluid is less in size. And the next has too long content.
Snippet
.parent {position: relative; margin: 0 0 15px; border: 1px solid #999; padding: 5px; padding-left: 100px;}
.parent .fixed {position: absolute; left: 5px; width: 90px; background-color: #99f;}
.parent .fluid {background-color: #f99;}
<div class="parent">
<div class="fixed">Fixed</div>
<div class="fluid">Fluid</div>
</div>
<div class="parent">
<div class="fixed">Fixed</div>
<div class="fluid">Fluid Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque animi placeat, expedita tempora explicabo facilis nulla fuga recusandae officia, maiores porro eaque, dolore et modi in sapiente accusamus id aut.</div>
</div>
Working Snippet
.parent {position: relative; margin: 0 0 15px; padding: 5px; padding-left: 100px; min-height: 50px;}
.parent .fixed {position: absolute; left: 5px; width: 90px; background-color: #99f;}
.parent .fluid {}
<div class="parent">
<div class="fixed">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAADsUlEQVR4nO3aS4gcVRTG8TsTgjMxCCoYo1ExulCjLjRCGElwISooLgRF1JWjIaIYooIQH5gsghtfIBoiAWeCCLoRxYX4IAjqJkpEXWlAUUQUQWMyMer0z0VVOzVl3X5NV3dPT/2hF9P3u4dzvuqpOvfWDaGioqKioqKiYgDBJjyMLTi13/n0DIzjdfP5BTf0O7eegOcUcxjn9ju/UsEYjkUMgB39zrFUcFaD4uHlfudYKji7iQFT/c6xNHAS3l2SBmAVPmlS/PAZgBFsxm8tFD9cBuBMvNFi4cNjAM7DNP5qs/jFbQBW41nMdFD44jQAo7gWr+H4Agrv2ACsxc162UViPZ7CD10oumMD8Dhm07k17Cyj2DFcjSckz/E/ulx0RwbgskiMG/PCk3E9NmKkSdDVabFbsQcf4fcSC85TaABWYGXuu8lIjEMYq4suxU+ZwTcxgVsla/EX8Da+wtGSimqHqVyRJ0guxHH8g30YT8eubBDnznqAZq3noJE34OkCzXRm/MNInI/rgp9LS7Uc8gZ8U6CpYUM6fkX6dxEXBK23oINC3oADEd2rGc37Ec29QW9vYN0gb8DmiO5PrEg1d0c000G5j6wyyBuwHN9GtFelmosj4wcDjpSRZYn87zGI5yPae9LxZeaaoSzfBwvry/tBkQFbI9rHMppfC8ZngsYbkINIkQEPRrSPZDRFN/sjQXcWKL2kyIDdEe2WzH2i6FH4XcDfZWVaEvmb4ErFP2+YSDWxNcGnQdI+LibyBtwX0c2Ya4nvj2j2BvEuaVDJG/BlRLcvo/ksopkcBgOK9htmcXk6vikSp4bzA74uKdGyyBvwYoFmTzo2is8jcfbXA9xufpMQ6wyPNRjrJXkDxiVL4FnJ/WzK3P/+dQ3i3JYNMiHZvnoA6yITjuI0yaurayTNx27s19sVZWxDZAwn5r6LNUgHsawoTn3ij5GJ70jdzWiXS65Ar2hnS2yiYH4NG5tN3NUggUPYjlvwEL5ooD1g/m5TN2h3U3SXuRv9LLa3Mul0C18jzGCN5Bdyk2RbrRs9Ryfb4hdJtsUvbGfSXQtMdFtBzDWSK7KQvcXevRjBMx0muRejDeKegZd09ovo7ZshPKr19cIsdjQqPhd7HT4YaAPSRC/BWw2MqOE9rO8g9ojkGNzhgTUgk+wq3IGdeDL9TGJtF2KfI77BORgGlI3kJccrS9aAEJb4IakQqmNy1UHJEJb4UdkQqsPS/4EN2CZ59J7S73wqKioqKioqhot/AedCJIQMIKG9AAAAAElFTkSuQmCC"/></div>
<div class="fluid">The Text</div>
</div>
<div class="parent">
<div class="fixed">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAADsUlEQVR4nO3aS4gcVRTG8TsTgjMxCCoYo1ExulCjLjRCGElwISooLgRF1JWjIaIYooIQH5gsghtfIBoiAWeCCLoRxYX4IAjqJkpEXWlAUUQUQWMyMer0z0VVOzVl3X5NV3dPT/2hF9P3u4dzvuqpOvfWDaGioqKioqKiYgDBJjyMLTi13/n0DIzjdfP5BTf0O7eegOcUcxjn9ju/UsEYjkUMgB39zrFUcFaD4uHlfudYKji7iQFT/c6xNHAS3l2SBmAVPmlS/PAZgBFsxm8tFD9cBuBMvNFi4cNjAM7DNP5qs/jFbQBW41nMdFD44jQAo7gWr+H4Agrv2ACsxc162UViPZ7CD10oumMD8Dhm07k17Cyj2DFcjSckz/E/ulx0RwbgskiMG/PCk3E9NmKkSdDVabFbsQcf4fcSC85TaABWYGXuu8lIjEMYq4suxU+ZwTcxgVsla/EX8Da+wtGSimqHqVyRJ0guxHH8g30YT8eubBDnznqAZq3noJE34OkCzXRm/MNInI/rgp9LS7Uc8gZ8U6CpYUM6fkX6dxEXBK23oINC3oADEd2rGc37Ec29QW9vYN0gb8DmiO5PrEg1d0c000G5j6wyyBuwHN9GtFelmosj4wcDjpSRZYn87zGI5yPae9LxZeaaoSzfBwvry/tBkQFbI9rHMppfC8ZngsYbkINIkQEPRrSPZDRFN/sjQXcWKL2kyIDdEe2WzH2i6FH4XcDfZWVaEvmb4ErFP2+YSDWxNcGnQdI+LibyBtwX0c2Ya4nvj2j2BvEuaVDJG/BlRLcvo/ksopkcBgOK9htmcXk6vikSp4bzA74uKdGyyBvwYoFmTzo2is8jcfbXA9xufpMQ6wyPNRjrJXkDxiVL4FnJ/WzK3P/+dQ3i3JYNMiHZvnoA6yITjuI0yaurayTNx27s19sVZWxDZAwn5r6LNUgHsawoTn3ij5GJ70jdzWiXS65Ar2hnS2yiYH4NG5tN3NUggUPYjlvwEL5ooD1g/m5TN2h3U3SXuRv9LLa3Mul0C18jzGCN5Bdyk2RbrRs9Ryfb4hdJtsUvbGfSXQtMdFtBzDWSK7KQvcXevRjBMx0muRejDeKegZd09ovo7ZshPKr19cIsdjQqPhd7HT4YaAPSRC/BWw2MqOE9rO8g9ojkGNzhgTUgk+wq3IGdeDL9TGJtF2KfI77BORgGlI3kJccrS9aAEJb4IakQqmNy1UHJEJb4UdkQqsPS/4EN2CZ59J7S73wqKioqKioqhot/AedCJIQMIKG9AAAAAElFTkSuQmCC"/></div>
<div class="fluid">A longer text. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus magni ipsam facilis laboriosam nesciunt eveniet obcaecati dicta laborum voluptatem reiciendis, possimus vel enim. Dignissimos assumenda ipsa aut. Facere, unde animi.</div>
</div>

Answer 3

.imgBox, .textBox{
float: left;
box-sizing: border-box;
}
.textBox{
height: 70px;
width: 100px;
background-color: grey;
color: white;
text-align: center;
padding-top: 25px;
}
<div>
<div class="imgBox">
<img src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" width="100" height="70"/>
</div>
<div class="textBox">
your text
</div>
</div>