Problems with float


#1

Hello. I'm having problems with float, I guess i dont understant 100% that function. I'm coding the "Inovation cloud" and I cant do the item 3 (In the main section, add an image. Here's the image we used. Write CSS to float the image to the left of the text.) Can someone help me?

HTML

 <div class="main">
          <div class="container">        
            <img src="https://s3.amazonaws.com/codecademy-content/projects/innovation-cloud/cloud.svg" width= 200px; height:= 200px;>       
            <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>

#2

I'm having this problem, any answer?


#3

Hi. You should add CSS rule:
.main img {
float: left;
margin: 50px 80px 50px 0;
}


#4

Hi, I have the same problem-can't get the picture to change to float left at all. I tried the code you put up, but nothing...

my html look exactly like the one above, the css is this:

/* Main */
.main .container {
margin: 80px auto;
}

.main img {
float: left;
margin: 50px 80px 50px 0;
}

it's honestly driving me crazy...
thanks!


#5

im not sure if you've got this worked out but if you haven't i think i figured it out for you!

your code is:

<div class="main">
          <div class="container">        
            <img src="https://s3.amazonaws.com/codecademy-content/projects/innovation-cloud/cloud.svg" width= 200px; height:= 200px;>

the css:

.main img {
float: left;
margin: 50px 80px 50px 0;
}

won't work because your image tag [img src] should be right below [div class="main"], but because you put it underneath the [container] tag, there is nothing under [.main img], so when style your css, nothing happens.

(reason being the img src is nested in class="main", and in css the selector .main img = to the nested image tag! where in other words, .main img is the child of .main)

you could try that, it should work! ^^


#6

I (Not OP, just some one with the same problem) was trying that, @lmzn, but still had no luck getting it work. I think I may just skip this step of the project. It is the second HTML/CSS project and I just cannot get it to float left of the text!

Also, I don't believe it needs to be .main .container img or you need to move the img, I have mine -

.main img {
max-height: 50px;
max-width: 100px;
float: left;
}

and then the html is -
div class="main">
div class="container">
img src="https://s3.amazonaws.com/codecademy-content/projects/innovation-cloud/cloud.svg"/>
h2>The Innovation Cloud Conference
p>Connect with the best minds across a wide range of industries to share ideas and brainstorm new solutions to challenging problems.


p>Hear industry leaders talk about what worked (and what didn't) so that you can save time on your most challenging projects.
p>Learn about the latest research and technologies that you can use immediately to invent the future.

/div>

And the image is small and to the left of the p and h2 elements. So, I guess I kinda figured it out. I think the issue is the image is too big and with the restrictions set up on the div elements, there just isn't room to float it to the left, if you just follow the HINT it gives you.

Wow, I do not know how to format for these conversations. I removed the < in the comment so it didn't try to actually compile the html.