CODEWITHSUNDEEP
htmlcss
Sputn1k
Sputn1k

Reputation: 51

Changing the CSS properties of specific elements in a div class

I am trying to get the text about the image to move to the right hand side of the image rather go under the image, I have been experimenting with float: right, but this moves all of the elements in the div class known as info, therefore I was wondering if there was a way to apply CSS formatting to specific elements of a div class? 

.info {
  color: #eaeaea;
}
<div class="info">
  <h3>Info</h3>
  <img src="img.jpg" alt="Image" width="70px" height="113px">
  <p>Information on the image
    <p>
</div>

Upvotes: 1

Views: 61

Answers (3)

undg
undg

Reputation: 825

Most important here is selecting img, and floating it left, so text on the right will by floating around img. To select element inside <div> with class name .info, simply add it after space

.info img {float: left}

.info {
  color: #888;
  width: 250px;
}
.info img {
  float: left;
  margin-right: 20px;
}
<div class="info">
  <h3>Info</h3>
  <img src="http://via.placeholder.com/70x113" alt="Image">
  <p>Dolor blanditiis cum obcaecati quibusdam mollitia modi. Accusamus error culpa quaerat aliquam doloremque Deserunt sit vel corrupti repellat quod animli est impedit? Adipisci sit magni recusandae quod quaerat.<p>
</div>

Upvotes: 1

Leonid Z
Leonid Z

Reputation: 161

This is your code:

<style>
        .info {
            color: #eaeaea;
        }
        .info img{
            float: left;
        }
            .info p {
                float: right;
            }
    </style>
<div class="info">
        <h3>Info</h3>
        <img src="img.jpg" alt="Image" width="70" height="113">
        <p>Information on the image</p>
    </div>

Now image is on the left side and text on the right side. This is what you want?

Upvotes: 0

Boric
Boric

Reputation: 872

You can use a CSS tag selector to set the image to float left like so: 

.info img 
{
  float: left;
}

Upvotes: 0

Related Questions