Positioning text next to an image

Question

I am having some problems with my code:

<style>
.expandedMsg{
  height: 10vh;
  text-align: left;
  width: 100%;
  padding-bottom: 0.4%;
  word-wrap:break-word;
  background-color: #C1DCE6;
}
.expandedMsg img{
  height: 9vh;
  width: 9vh;

  float: left;
}

.expandTop{
  margin-left: 2px;
  font-size: 1.2vw;
  width: 100%;
  height: 100%;
}

</style>

<div class="expandedMsg">
    <img src="https://pbs.twimg.com/profile_images/378800000334311614/cdfed842c12b1964f784d03f0fdb9a30_400x400.jpeg">
    <p class="expandTop">
        <b>Title:</b> <span>dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd</span>
    </p>
</div>

Here's how it looks like in my firefox browser:

Here's what I am trying to achieve:

So basically, I am trying to get the text on a little bit of margin from the top of .expandedMsg, and also to get .expandedMsg .expandTop to grow vertically whenever there's a text overflow so the background will the blanks. Lastly for some reason Title: text are not on the same line... what I get right now is quite a mess, I will greatly appreciate any help. thanks in advance.

Answer 1

Unwrap the text from the <p> tags. If you want <b>Title</b> to appear inline (it actually is inline) with the rest of the text, you need to break up the text so it's not one gigantic continuous line.

The latest update involves a nested floated inline-block yes it's bizarre but it allows you more control of margins and padding (which floated elements love to ignore).

/* defaults */
html {
  font: 400 12px/1.428 Consolas
}

/* This is important in any layout, it gives all of the other percentages 
a reference point.
*/
html,
body {
  width: 100%;
  height: 100%;
}

.expandedMsg {
  /* It will never be lower than 10vh */
  min-height: 10vh;
  /* It will expand vertically with content */
  height:auto;
  text-align: left;
  width: 100%;
  padding-bottom: 0.4%;
  word-wrap: break-word;
  background-color: #C1DCE6;
  overflow:hidden;
  /* Increase the first number to move the text down */
  padding:10px 10px 10px;
}

.expandedMsg img {
  height: 9vh;
  width: 9vh;
  float: left;
  /* Necessary so that margins work */
  display: inline-block;
  /* Decrease the first number in order to go up */
  margin: -5px 5px 0;
}

.text {
/* This is applied to the text on a double <span> */
display:inline-block
float:left
}

<div class="expandedMsg">
  <img src="https://pbs.twimg.com/profile_images/378800000334311614/cdfed842c12b1964f784d03f0fdb9a30_400x400.jpeg">
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
<!-- 
NOTE there's a <span> nested within a <span> and they share the same class
-->
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
  <span class='text'><b>Title:</b><span class='text'>Lorem ipsum dolor sit amet, viderer elaboraret percipitur te nam, mei et option iudicabit. Et semper nostro conceptam mea, tale evertitur cu nec. Eu error utamur his, an sumo vero insolens has. Ei laudem ubique numquam ius.

Explicari theophrastus ex eam, sint ipsum consequuntur cu vim. Ad epicuri dissentiunt efficiantur qui, ea decore principes his. Mea ne euismod oportere. Qui solum elitr ne, quo at tamquam omittam. Est quodsi vivendo vituperatoribus id, qui cu esse justo audiam.

Graeco sanctus gloriatur per ei. Ei debet lobortis duo. An quem aperiam has, ius nisl abhorreant id. Pri in cibo probatus petentium.

Nec idque appetere principes at, mazim quidam scripta mei at, erat munere te eam. Case convenire contentiones vis ut, at habeo facete epicuri est, cu malis partiendo pri. Et integre veritus duo, cum discere laoreet alienum no. Eu eos amet primis fastidii, id duis inani vim, feugiat postulant scribentur his ex. Alienum delicatissimi sea ut.

Ne mediocrem liberavisse nam, probo ancillae voluptatibus te eos. Usu ne ridens persecuti. Novum accumsan convenire et vim. Qui iisque ponderum deseruisse eu, pro alii utinam vivendo id, audire definiebas posidonium nec no. Omnium eruditi duo cu. Te dico nonumy perpetua vim, cum menandri dignissim sententiae ut, id cum decore meliore referrentur.

Sed no dolor ceteros. Aeterno accusamus urbanitas sit te. Viris prompta vix ei, ea mea ullum iusto. Ius dignissim consequuntur an. In solet erroribus dissentias nam, possim suscipiantur ei mea.

His equidem impedit intellegebat te, per hinc ignota cu. Gubergren persecuti philosophia an mei. In sit modo adhuc decore, suas facilisi vis an. Eos in tempor conclusionemque, ei vis habeo prima, ut autem ridens epicurei est. Modus sanctus euripidis ut eum. Quo natum assum te, eos an bonorum adolescens. At autem fuisset sea, et usu reque vitae complectitur.

Id saperet constituam consectetuer mel. Minim essent debitis pri ut. Sit natum dicunt nominati cu. Veritus constituam eam at, vel ei assum iisque, quo case illud perfecto ei. Ut libris audire nam, vel atqui phaedrum no.

Mei ne viris tibique aliquando, sea et imperdiet dissentiunt. Erat impetus suscipit ex nec, sea eu unum falli. Vix ea alterum interpretaris, te partem populo eos. Tempor incorrupte sea ex, et mei graeco quaestio volutpat, ius in nihil munere. Qui an solet sapientem, ex eros regione maluisset quo. Laudem electram id per, no pro nisl graeci dicunt, id graecis pericula conclusionemque qui. Mollis alienum in vim, te tritani delenit pri.

Sit viderer graecis id, quo id mutat reprimique, vidisse salutandi adolescens an est. Vim ex omittam consetetur, no everti laoreet fierent vim. Minim consul efficiendi an vis, saperet sadipscing ei nec. Etiam definiebas eu sea, ex oblique adversarium sed. Lorem simul per ne, cu has nisl vitae nemore. Reque labitur liberavisse an nam.</span></span>
</div>

Answer 2

Your example is rather unrealistic. A text contains words with a certain length that does not exceed ... - whatever. Your text contains ONE word with a length that spans several lines - completely unrealistic...

Assigning float: left to the image is completely sufficient for what you want to do if you use a real-world text as in the snippet below.

.expandedMsg {
  min-height: 10vh;
  padding-bottom: 0.4%;
  word-wrap: break-word;
  background-color: #C1DCE6;
}

.expandedMsg img {
  height: 9vh;
  width: 9vh;
  float: left;
  margin-right: 0.5em;
}

.expandTop {
  margin-left: 2px;
  font-size: 1.2vw;
}

.expandedMsg b {
  display: inline-block;
  padding-top: 4px;
}

<div class="expandedMsg">
  <img src="https://pbs.twimg.com/profile_images/378800000334311614/cdfed842c12b1964f784d03f0fdb9a30_400x400.jpeg">
  <p class="expandTop">
    <b>Title:</b> <span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, </span>
  </p>
</div>

Answer 3

It is because your dddddddd are all one word, which means the text won't wrap. If you use text similar to a normal text structure with spaces then it will wrap correctly.

.expandedMsg{
  height: 10vh;
  text-align: left;
  width: 100%;
  padding-bottom: 0.4%;
  word-wrap:break-word;
  background-color: #C1DCE6;
}
.expandedMsg img{
  height: 9vh;
  width: 9vh;
  float: left;
}
.expandedMsg b {
  display:inline;
}
.expandTop{
  margin-left: 2px;
  font-size: 1.2vw;
  width: 100%;
  height: 100%;
}

<div class="expandedMsg">
  <img src="https://pbs.twimg.com/profile_images/378800000334311614/cdfed842c12b1964f784d03f0fdb9a30_400x400.jpeg">
  <p class="expandTop">
    <b>Title:</b> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut auctor sem porttitor quam sollicitudin, nec gravida nulla egestas. Vivamus a velit id arcu feugiat mattis. Sed sed sem condimentum, rutrum risus non, sodales urna. </span>
  </p>
</div>

I just noticed you already have word-wrap:break-word; which was my second solution. I go this to work by just sitting the span tag next to the b tag by deleting the white space in the HTML.

.expandedMsg{
  /* height: 10vh; */
  text-align: left;
  width: 100%;
  padding-bottom: 0.4%;
  word-wrap:break-word;
  background-color: #C1DCE6;
}
.expandedMsg img{
  height: 9vh;
  width: 9vh;
  float: left;
}
.expandedMsg b {
  display:inline;
}
.expandTop {
  margin-left: 2px;
  font-size: 1.2vw;
  width: 100%;
  height: 100%;
}
.expandedMsg:after {
 content:" ";
 display:table;
 clear:both;
}

<div class="expandedMsg">
  <img src="https://pbs.twimg.com/profile_images/378800000334311614/cdfed842c12b1964f784d03f0fdb9a30_400x400.jpeg">
  <p class="expandTop">
    <b>Title:</b><span>dddddddddddddddddddddddd</span>
  </p>
</div>

Answer 4

Are you trying to have your image and text side by side? If so, you probably want to have 2 div's (one for your image and one for the text) within the expandedMsg div. Once you have that, you can play around with the margin's and proportions of the text div