Can I lay out 3 elements to that middle element floats left?

Question

My content management software is imposing rigidity on how my elements are parsed on the page, and I'm stuck with something like the following HTML:

<div class="section-container">
  <h4>Title Coming In from Content Mgmt</h4>
  <div class="image-container">
    <img src="some_product_img" />
  </div>
  <div class="paragraph-container">
    <p>Some product information blah blah blah</p>
  </div>
</div>

Not much I can do about that. But my design requires a layout like such:

Given that I cannot change the HTML structure here, is there some kind of CSS wizardry that will allow me to achieve the desired layout?

I have experimented with using floats and tried some flexbox tricks like flex-basis, but reached a plateau in my knowledge and second-guessed if it were possible with those methods.

I appreciate the help!

would display:grid be fine for you ? – G-Cyrillus Jul 24 '19 at 17:14 — G-Cyrillus, Jul 24 '19 at 17:14
That might just do the trick! – Kevin H. Jul 24 '19 at 17:26 — Kevin H., Jul 24 '19 at 17:26

score 1 · Accepted Answer · answered Jul 24 '19 at 17:18

Display:grid is nowdays the easiest way for this kind of layout

example

.section-container {
display:grid;
grid-template-columns:auto 1fr;
}
.image-container {
grid-row:1 /span 2;
grid-column:1;
}
/* see us */.section-container > *{border:solid rgb(44, 124, 254);margin:2px;}

<div class="section-container">
  <h4>Title Coming In from Content Mgmt</h4>
  <div class="image-container">
    <img src="http://dummyimage.com/200" />
  </div>
  <div class="paragraph-container">
    <p>Some product information blah blah blah</p>
  </div>
</div>

here is a couple of usefull links https://css-tricks.com/snippets/css/complete-guide-grid/ & https://gridbyexample.com/

Can I lay out 3 elements to that middle element floats left?

1 Answers1