CODEWITHSUNDEEP
htmlcss
MucaP
MucaP

Reputation: 1062

html & css - Images and Text aligned in the right way not working

I need help doing something that seems very easy (as stated in some SO topics) but is not working for me. I need to position some images and text the same way as the example below:

_______________
|              |              
|IMG      IMG  |
|   IMG        |  <h4>Big text here</h4>
|      IMG     |  Simple <h5> text here, saying                   
| IMG          |  more about the image on side.
|_________IMG__|

The code I tried came from SO also, and is:

.img{ 
    float: left;
    margin-right:1rem;
}

.ban2 {
    font-size: 23px;
}
<div>
    <img class="img" width="500" src="img/Final-IMG.png">
    <p>
        <h3>Responsivo</h3>
        <br>
        <h5 class="light">Isso normalmente deveria ser correto</h5>
    </p>
</div>

The text acts like it was a break with no margin on the left side, not in the right side of the image as it should. Can anyone help me achieving the result I want to? Thanks!

Upvotes: 0

Views: 45

Answers (2)

ptts
ptts

Reputation: 1053

I think this is what you wanted?

.img{ 
float: left;
margin-right:1rem;
}
h3 {
color:red;
}
h5 {
color:green;
}

Link

http://codepen.io/damianocel/pen/zNwjyz

Or do you want the h3 and h5 to be under the img?

Upvotes: 0

Serg Chernata
Serg Chernata

Reputation: 12400

There's a few issues here:

  1. Just because you see an SO example doesn't mean it's correct or will work as intended forever. Learn to debug and double check the work of others.
  2. Your code is not like the example you linked to. You changed enough things to break it.
  3. Headings do not belong inside of a paragraph. If you look at the generated markup you will see that the browser breaks the paragraph into two, trying to fix your broken markup.

enter image description here

.img{ 
    float: left;
    margin-right:1rem;
}

.ban2 {
    font-size: 23px;
}
<div>
    <img class="img" width="300" src="http://lorempixel.com/output/cats-q-c-300-300-3.jpg">
    <p>
        <strong>Responsivo</strong>
        <br>
        <strong class="light">Isso normalmente deveria ser correto</strong>
    </p>
</div>

Upvotes: 1

Related Questions