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

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

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?

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?

1 Like

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.

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?

1 Like

Did you try row reverse?

1 Like

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

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.
Screen Shot 2021-01-29 at 10.35.09 AM

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

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

It still goes like this
Screenshot from 2021-01-29 19-47-13

Also , when i try to use the br tag after “Premium Materials” it doesnt work, instead the text goes in the icon
Screenshot from 2021-01-29 19-50-21

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.

Thank youuuuuuuuuuu! (20 characters :P)

1 Like