Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community!

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by MAM khan
MAM khan
261 Points

Placing Image next to text.

Hi,

I want the text to come next to the image, wrapping around it. I have been trying for many hours but couldnt make it happen. Below is the code. Any help is much appreciated.

<!DOCTYPE html>

  <h3>My Artwork</h3>

  <div id= "artcolumn">
        <div  id= artpic>
            <img src= "img/pencils.jpg" width= 60px height= 80px class= art>
       </div>

       <div id= "artcontent"> 
          “Murderer,” Dunbar said quietly.
         “Killer,” Yossarian said.
          What are you fellas talkin” about?” the Texan asked nervously.
          “You murdered him,” said Dunbar.
          “You killed him,” said Yossarian. 
      </div>
   </div>   

  img {
max-width: 100%;
}

h3 {
  color: crimson;
}

#artcolumn {
width: 50%;
  overflow: auto;
  border: 1px solid red;
}

#artpic {
  float: left;
}

#artcontent{
  float: right;
  color: blue;
  font-size: 15px;
}

1 Answer

Rafael Capati
Rafael Capati
10,725 Points

You can float only the image and have the text to adjust accordingly.

See some modifications that I have made in your code, maybe this help:

https://jsfiddle.net/wya2vd51/

MAM khan
MAM khan
261 Points

Thanks Rafael, its working. Just removing float: right made the difference! and I spent hours on it.

Thanks again