Step 4: Float left an image


#1

In step 4 where I float left my image I still end up with paragraph 2 and 3 text that is running over to the left under the image. See here http://screencast.com/t/dZRstCzK0

Here is my code:

    <div class="main">
      <div class="container">
        
			<img class="main" src="https://s3.amazonaws.com/codecademy-content/projects/innovation-cloud/cloud.svg" height=128px width=196px />
        <h2>The Innovation Cloud Conference</h2>
        <p>Connect with the best minds across a wide range of industries to share ideas and brainstorm new solutions to challenging problems.</p>
        <p>Hear industry leaders talk about what worked (and what didn't) so that you can save time on your most challenging projects.</p>
         <p>Learn about the latest research and technologies that you can use immediately to invent the future.</p>
      </div>
    </div>`

Here is my CSS

/* Main */

.main .container {
	margin: 80px auto;
}

.main img {
  float: left;
  display: inline-block;
}

#2

the text should be all be on the right side of the image? Not under the image?


#3

you could simple wrap your paragraphs in a div and add a class pull-right, or you could go much further by adding a grid system like i did here


#4

Ok floating right makes sense, I think I was a bit tired at 5AM when I started working on this.

I would like to try the grid system you did. How did you go about taking the design and laying it out on a grid? I'm using Sketch for my designs and I have several bootstrap grid layouts. Are you just screenshotting the design and dropping into a design program so you can figure out the grid layout or is there some chrome extension or other easier method?


#5

Bootstrap grid is super simply, you just code it


#6

I just added padding to the img. Try it.