-1

There appears to be a few questions around this already, but none of the questions have the answer to this question...

I have a SVG image in an inline-grid and I would like to have it to the left of the text just like I would do it with float:left;, but there appears to be a known bug that makes it impossible.

So the question is - how do I place the image to the left so that it displaces the text on the left side just like float:left; would?

.company-content {
    width: 79%;
    display: inline-grid;
}
<div class=company-content>
  <p>
    <div style="width:10%; height:10%; display:inline-grid; float:left;"><img src="https://picsum.photos/500" style=" display:flex; width:3rem; height:3rem; align-items:center; float:left;" /> </div>Lorem Ipsum blablabla bla bla bla bla</p>

P.S. Yeah, I've tried justify-self:start;, doesn't appear to work...

Munchkin
  • 857
  • 5
  • 24
  • 51
  • `justify-self` is a flexbox-related property, it will only work in a flexbox (`display:flex` or `display:inline-flex`) context (see https://developer.mozilla.org/en-US/docs/Web/CSS/justify-self). If your'e looking for the text to float around the image i believe you cant use grid as the actual "floating around stuff" behaviour is achieved by changing the text flow with `float:left` or `float:right`. Long story short: If you want something to float, you need to use `float` – Fabian S. Oct 15 '21 at 07:54
  • 4
    Make it simple, p is not a grid nor a flex parent, so img can float. remove that div not alowed inside a p, and just size and float your image. – G-Cyrillus Oct 15 '21 at 07:55

1 Answers1

1

I think you have mixed inline and flex which has different approaches to the layout. and second you gave container and item both inline-grid property. and What you want to do is "<p>" with "<img>" inside a "<div>" but you give "<div>" inside "<p>" you can use "<span>" inside "<p>" If I understand your request correctly, the following codes are what you want

.company-content {
    width: 79%;
    display: inline-grid;
}
<div class=company-content>
  
    <p><span style="width:10%; height:10%; "><img src="https://picsum.photos/500" style="width:3rem; height:3rem; float:left" /></span> Lorem Ipsum blablabla bla bla bla bla</p></div>
ibrahimuslu
  • 71
  • 4
  • My IDE tells me that I can't do that with a h1 tag, how do I accomplish the same with a h1 Tag? – Munchkin Oct 15 '21 at 10:22
  • I replaced h1 tag with a span with an ID which makes it look the same, but apparently that's not for great for accessibility and similar features, what should I do? – Munchkin Oct 15 '21 at 10:26
  • try to style the p tag as resembles to h1 – ibrahimuslu Oct 15 '21 at 22:11
  • that doesn't change a thing. there are applications for those with disabilities and similar stuff that looks for h1 tags and similar and reads them out loud and similar and the p tag wouldn't be a good fit imo – Munchkin Oct 16 '21 at 13:04