Wrapping Text Around Images (Responsive)

Question

Good Evening,

I have tried and tried to position my text to the right of an image and when the browser is smaller then drops down underneath the image. Can somebody tell me what I am doing wrong or not doing.

#bandmemberinfo-container {
  width: 100%;
  background-color: black;
  height: auto;
  margin-top: 10px;
  border: 1px red solid;
  color: #fff;
  font-family: Arial;
  font-size: 10px;
  text-transform: uppercase;
}
.bandmemberinfo-container img {
  height: 100%;
  max-width: 350px;
  float: left;
}

<div id="bandmemberinfo-container">
  <!-- BAND MEMBER INFO CONTAINER START -->

  <img src="http://slade40years.page4.com/nobby_439_752.jpg" class="img-responsive nobbyboulder" />

  <p>THE 1970'S HOSTED ONE OF THE MOST FLAMBOYANT DECADES IN THE HISTORY OF POP MUSIC AND ARTISTS SUCH AS SWEET, DAVID BOWIE, WIZZARD, T-REX AND MUD CHAMPIONED THE "GLAM ROCK" MOVEMENT, WHERE PLATFORM BOOTS, SEQUINNED SHIRTS, TWO-TONE FLARED TROUSERS AND
    OUTRAGEOUS MAKE-UP, BECAME THE NORM FOR MANY POP BANDS. THE MIGHTY SLADE LED THE GLAM MARCH ACROSS THE UK, INTO EUROPE AND THROUGHOUT THE WORLD. IT IS A PART OF POP HISTORY THAT HAS SHAPED MUSIC CULTURE MANY YEARS LATER AND SLYDE CONTINUE TO KEEP
    THE EXCITING ATMOSPHERE OF GLAMROCK ALIVE. THEY ARE THE PERFECT CHOICE FOR ANY 70'S THEMED EVENT WITH AN IMPRESSIVE STAGE SHOW DURING WHICH THEY COVER MANY OF THE CLASSIC HITS OF THAT ERA SLYDE HAVE SUPPORTED ARTISTS SUCH AS THE RUBETTES, BAY CITY
    ROLLERS, SMOKIE, BONEY M AND THE LATE ALVIN STARDUST. THEY ARE THE LONGEST RUNNING TRIBUTE TO THE MUSIC OF SLADE AND HAVE PERFORMED WITH THEM AT 70'S WEEKENDERS, UNDER THE NAME OF GLAMROCK UK.</p>

  <!-- BAND MEMBER INFO CONTAINER END-->
</div>

I made a snippet for you. Can you give a hint what it is supposed to look like? To add images do `![](imageurl)` — mplungjan, Nov 08 '16 at 20:32

score 2 · Accepted Answer · answered Nov 08 '16 at 20:36

2

You are using a class selector that is not in your HTML Use:

#bandmemberinfo-container img {
  height: 100%;
  max-width: 350px;
  float: left;
}

or add "bandmemberinfo-container" class not id (http://www.w3schools.com/css/css_syntax.asp ;)

answered Nov 08 '16 at 20:36

marcinrek

339
1
8

This is great advice. Thank you. However my img is now not inside the border of the #bandmemberinfo-container div. Any ideas? – reecechapas Nov 08 '16 at 20:51
Try adding overflow:hidden to #bandmemberinfo-container - more on this here: http://stackoverflow.com/questions/211383/what-methods-of-clearfix-can-i-use – marcinrek Nov 08 '16 at 20:55
Perfect. Thanks!! – reecechapas Nov 08 '16 at 23:30

Johannes · Answer 2 · 2016-11-08T21:36:43.070

You have two little mistakes:

1.) The selector for the image has to be #bandmemberinfo-container img instead of .bandmemberinfo-container img

2.) Its CSS settings should be like this:

#bandmemberinfo-container img {
  width: 100%;
  max-width: 350px;
  float: left;
}

I.e. 100% width not height) for small screens (below 350px wide), but with a maximum of 350px - then the text will float right of it on larger screens (above 350px).

#bandmemberinfo-container {
  width: 100%;
  background-color: black;
  height: auto;
  margin-top: 10px;
  border: 1px red solid;
  color: #fff;
  font-family: Arial;
  font-size: 10px;
  text-transform: uppercase;
}
#bandmemberinfo-container img {
  width: 100%;
  max-width: 350px;
  float: left;
}

<div id="bandmemberinfo-container">
  <!-- BAND MEMBER INFO CONTAINER START -->

  <img src="http://slade40years.page4.com/nobby_439_752.jpg" class="img-responsive nobbyboulder" />

  <p>THE 1970'S HOSTED ONE OF THE MOST FLAMBOYANT DECADES IN THE HISTORY OF POP MUSIC AND ARTISTS SUCH AS SWEET, DAVID BOWIE, WIZZARD, T-REX AND MUD CHAMPIONED THE "GLAM ROCK" MOVEMENT, WHERE PLATFORM BOOTS, SEQUINNED SHIRTS, TWO-TONE FLARED TROUSERS AND
    OUTRAGEOUS MAKE-UP, BECAME THE NORM FOR MANY POP BANDS. THE MIGHTY SLADE LED THE GLAM MARCH ACROSS THE UK, INTO EUROPE AND THROUGHOUT THE WORLD. IT IS A PART OF POP HISTORY THAT HAS SHAPED MUSIC CULTURE MANY YEARS LATER AND SLYDE CONTINUE TO KEEP
    THE EXCITING ATMOSPHERE OF GLAMROCK ALIVE. THEY ARE THE PERFECT CHOICE FOR ANY 70'S THEMED EVENT WITH AN IMPRESSIVE STAGE SHOW DURING WHICH THEY COVER MANY OF THE CLASSIC HITS OF THAT ERA SLYDE HAVE SUPPORTED ARTISTS SUCH AS THE RUBETTES, BAY CITY
    ROLLERS, SMOKIE, BONEY M AND THE LATE ALVIN STARDUST. THEY ARE THE LONGEST RUNNING TRIBUTE TO THE MUSIC OF SLADE AND HAVE PERFORMED WITH THEM AT 70'S WEEKENDERS, UNDER THE NAME OF GLAMROCK UK.</p>

  <!-- BAND MEMBER INFO CONTAINER END-->
</div>

score 1 · Answer 3 · answered Nov 08 '16 at 21:13

I think for what your desired effect is. You can put the image inside the paragraph tag as the first item before the text starts, then the text will wrap around the image. You can then just add margin to the image to give it extra space between the image and text. And possibly use the image align-attribute

I have added another more heavy html element approach below, to show another method to control a layout. This is using floats and a more responsive approach.

I would also avoid using ID; use class as a rule of thumb. As it is just one less think to think about. And, if you don't care about legacy (IE) browsers then you could consider to use Flexbox. Which will help with different screens and wrapping of images.

.bandmemberinfo-container {
  display: inline-flex;
  width: 100%;
  background-color: black;
  height: auto;
  margin-top: 1em;
  border: 1px red solid;
  color: #fff;
  font-family: Arial;
  font-size: 0.9em;
  text-transform: uppercase;
}
.img_wrap {
  float: left;
  width: 50%;
  border: 1px yellow dashed;

}
.img_wrap img {
  height: auto;
  max-width: 100%;
}
.two {
  float: left;
  width: 50%;
}

<div class="bandmemberinfo-container">
  <div class='img_wrap'><img src="http://slade40years.page4.com/nobby_439_752.jpg" /></div>

<div class='two'>THE 1970'S HOSTED ONE OF THE MOST FLAMBOYANT DECADES IN THE HISTORY OF POP MUSIC AND ARTISTS SUCH AS SWEET, DAVID BOWIE, WIZZARD, T-REX AND MUD CHAMPIONED THE "GLAM ROCK" MOVEMENT, WHERE PLATFORM BOOTS, SEQUINNED SHIRTS, TWO-TONE FLARED TROUSERS AND
    OUTRAGEOUS MAKE-UP, BECAME THE NORM FOR MANY POP BANDS. THE MIGHTY SLADE LED THE GLAM MARCH ACROSS THE UK, INTO EUROPE AND THROUGHOUT THE WORLD. IT IS A PART OF POP HISTORY THAT HAS SHAPED MUSIC CULTURE MANY YEARS LATER AND SLYDE CONTINUE TO KEEP
    THE EXCITING ATMOSPHERE OF GLAMROCK ALIVE. THEY ARE THE PERFECT CHOICE FOR ANY 70'S THEMED EVENT WITH AN IMPRESSIVE STAGE SHOW DURING WHICH THEY COVER MANY OF THE CLASSIC HITS OF THAT ERA SLYDE HAVE SUPPORTED ARTISTS SUCH AS THE RUBETTES, BAY CITY
    ROLLERS, SMOKIE, BONEY M AND THE LATE ALVIN STARDUST. THEY ARE THE LONGEST RUNNING TRIBUTE TO THE MUSIC OF SLADE AND HAVE PERFORMED WITH THEM AT 70'S WEEKENDERS, UNDER THE NAME OF GLAMROCK UK.</p></div>

  <!-- BAND MEMBER INFO CONTAINER END-->
</div>

Wrapping Text Around Images (Responsive)

3 Answers3