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

Question

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!

Serg Chernata · Accepted Answer · 2017-01-22T17:48:12.000

1

There's a few issues here:

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.
Your code is not like the example you linked to. You changed enough things to break it.
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.

.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>

edited Jan 22 '17 at 17:48

answered Jan 22 '17 at 17:40

Serg Chernata

12,280
6
32
50

Ok, I was messing around. But my image is 300px width, so it did not solve the problem – MucaP Jan 22 '17 at 17:43
I have absolutely no idea what you're talking about. – Serg Chernata Jan 22 '17 at 17:44
Read the question then. The text just behaves the same way using your code. or not,
or not, nothing will actually change.
– MucaP Jan 22 '17 at 17:46
My snippet doesn't work? It's doing exactly what you asked for. – Serg Chernata Jan 22 '17 at 17:46
Solved the problem. It was missing a character, Sorry, your answer actually solved my problem! – MucaP Jan 22 '17 at 17:49

score 0 · Answer 2 · answered Jan 22 '17 at 17:55

0

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?

answered Jan 22 '17 at 17:55

ptts

1,022
8
18

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

2 Answers2