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! While you're at it, check out some resources Treehouse students have shared here.

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

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

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/

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

Thanks again