Step 4: Float left an image


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

Here is my code:

    <div class="main">
      <div class="container">
			<img class="main" src="" 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>

Here is my CSS

/* Main */

.main .container {
	margin: 80px auto;

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


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


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


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?


Bootstrap grid is super simply, you just code it


I just added padding to the img. Try it.