Shutterbugg second image float right


#1

I can't find the CSS to make floating right my img in the second section div.

 <!-- The second section div -->
    <div class="section">
      <div class="container">
		 	<div class="row">
  			<div class="col-md-6">
         	 <h1>Explore</h1>
           <p>Explore moments from your friends and family. Shutterbugg makes it easy to see what's happening in the world and take in everything around you.</p>
          </div>
 			  <div class="col-md-6">
          <img src="https://s3.amazonaws.com/codecademy-content/projects/shutterbugg/explore.png"/>
          </div>
</div>	
      </div>
    </div>

#2

col-md-6 does the trick, right? But only for screens larger then 992px, if you want smaller, also use col-xs-6 (<768px) and col-sm-6 (>768px and < 992px)

You can find more about it here


#3

Thanks for the answer but this is not the problem. I am able floating right all three image at the same time but not only the second.


#4

Your code doesn't contain everything related to the question, there is only one iamge


#5

Hi Miclev,

Give your image a way to select it easily like giving it an id in html.

<img src="................." id="img2">

then in css select it and use the position property to move it (this is really useful):

#img2 {
position: relative;
left: 100px;
}

img2 - You are selecting the the html element with the id img2.

Position: relative - moves its position relative to its original position, this is the default position before you make any adjustments.
left: 100px - adds 100px of empty space to its left moving it to the right relative to its original position by 100px.

Hope this helps,

Saman


#6

Thanks a lot!! I did not think about it!!


#7

Hey again,

I know its been a while now but I've found a better way to get around this problem as it came up again later in an other project.

In the HTML you can put the (second) image in a div and set its class to 'pull-right'. This way you don't have to fiddle around with the pixel numbers.

e.g.

<div class='pull-right'>
    <img src='#'>
</div>

#8

i don't think you need any CSS code to make this inline on one row. You have already divided the grid by half so text and img would be sitting side by side.