How to put a <div> element wherever I want on the page?

[n-dree]

How to put my div wherever i want on my page?

[jwilkins.oboe]

HI @n-dree !

Welcome to the forum!

I don’t know if I understand your question.

Divs are just generic containers without any semantic meaning.

Can you explain more what the issue is?

[n-dree]

well, for example on the Product Landing Page I put the fire icon. Now I want to put the text next to it but it goes underneath.
Then I also want to continue, after i’m done with “Premium Materials” to go right under it with the truck icon and “Fast Shipping”
I just said div but it could be done even with other tags but its not very clear to me how…with position:flex maybe or relative?

[jwilkins.oboe]

It would help to see your code.

If you want to place the icon next to some text you could throw them both in a div and use display flex.

The default for flex is a row.

[n-dree]

well i kinda did it but i want to put the text goes before the icon…how can i put the text after the icon?

[jwilkins.oboe]

Did you try row reverse?

[n-dree]

i tried it… it messed up anyway this is my pen
https://codepen.io/3ndri/pen/RwowQaz

[jwilkins.oboe]

You could try this

    <div class="row">
      <div><i class="fa fa-4x fa-fire" id="fire"></i></div>
      <h1><b>Premium Materials</b></h1>
   </div>

.row {
  display:flex;
}

I deleted the extra divs you had.

Also I would avoid inline css styles.

You should get this.

Then you can mess with the spacing to your liking and style the fire icon to your liking.

[jwilkins.oboe]

Also, you don’t have to recreate the sample project.

You can experiment a bit more and and create something a little stylistically different than the sample.

The samples are just one way to do the product page.

[n-dree]

It still goes like this

Also , when i try to use the br tag after “Premium Materials” it doesnt work, instead the text goes in the icon

[jwilkins.oboe]

wrap the icon in a div and get rid of postion relative in the fire id in your css.

Also ditch the inline styles.

style="display: flex;"

The position relative was creating the issue.

[n-dree]

Thank youuuuuuuuuuu! (20 characters :P)