Text next-to image

Question

Just with CSS, I would like to put the number of subscribers next to the logo

But with position : absolute the logo is on the text and if the text is in

float : right there are a problems

My program

<div>
    <h3>Suivez-nous</h3>
    <div class="Facebook">
        <img src="images/Facebook.png">
        <p>500 000 abonnés</p>
    </div>
    <div class="twitter">
        <img src="images/twitter.png">
    </div>
    <div class="instagram">
        <img src="images/instagram.png">
    </div>
</div>

All code in https://codepen.io/adri1212/pen/dgVVpK

This code is a just part of a footer and use a flexbox

But I use a flexbox, beacause this code it's juste one part of a footer — Adri, Oct 14 '18 at 12:16
That seems like important information to have in your question. — Niet the Dark Absol, Oct 14 '18 at 12:17
Possible duplicate of [What is the difference between HTML tags
and ?](https://stackoverflow.com/questions/183532/what-is-the-difference-between-html-tags-div-and-span) — JonathanDavidArndt, Oct 15 '18 at 03:32

Itay Gal · Answer 1 · 2018-10-14T12:29:20.820

1

Just don't use <p> as its default display is block

Example

If you want to wrap your text - you can use <span> which is an inline element by default.

Example with span and margin

edited Oct 14 '18 at 12:29

answered Oct 14 '18 at 12:22

Itay Gal

10,706
6
36
75

Yes, but after I don't move the text. For exemple put the text at 20px – Adri Oct 14 '18 at 12:26
You can add `margin-left: 20px` to the `` container – Itay Gal Oct 14 '18 at 12:28
it's all span to move, so logo + text and not just the text – Adri Oct 14 '18 at 12:36

JonathanDavidArndt · Accepted Answer · 2018-10-14T12:40:36.183

As noted in the comments, <p> need to be removed, and the <div> elements need to be replaced with <span>

This will give you a single line of images with text between the images:

<footer>
    <div>
        <h3>Titre section 1</h3>
        <p>test</p>
    </div>
    <div>
        <h3>Titre section 2</h3>
    </div>
    <div>
        <h3>Titre section 3</h3>
    </div>

    <div>
        <h3>Suivez-nous</h3>
        <span class="Facebook">
            <img src="images/Facebook.png">
            500 000 abonnés
        </span>
        <span class="twitter">
            <img src="images/twitter.png">
        </span>
        <span class="instagram">
            <img src="images/instagram.png">
        </span>
        </div>
</footer>

score -1 · Answer 3 · answered Oct 14 '18 at 12:27

-1

I found a solution,

In the CSS I put

    .Facebook > p{
         display : inline;
    }

answered Oct 14 '18 at 12:27

Adri

144
8

Probably a better solution might be wrapping it under a div and then `display: flex, flexDirection: row` – Alwaysblue Oct 14 '18 at 12:31
Okay, it's functional but not valid. – Adri Oct 14 '18 at 12:32
I think to use flex-direction but the other people I found solution so it's goob – Adri Oct 14 '18 at 12:32
Agree that this will work, but you would do better using a different tag that already displays inline (such as ``) and simply adjust the margins. One of the whole points of using `
` is that it is a block level element, and this changes all that.
– JonathanDavidArndt Oct 14 '18 at 12:43
Yes I use the solution (my previous message may not have been understood correctly ) – Adri Oct 14 '18 at 12:46

Text next-to image

3 Answers3