Struggling to accomplish what I believed would be a simple task in HTML/CSS, but continuously facing obstacles in achieving the desired layout.
My objective is to create a three-column layout where three different pieces of content are displayed as part of a continuous sentence with an image in the middle. The challenge lies in adapting the column widths based on varying text lengths and image sizes, ensuring that the last column fills up the remaining space for the text to break appropriately.
Refer to the diagram below for an illustration of the intended layout:
https://i.sstatic.net/iVdmQ.jpg
An interactive example showcasing how each component should respond to different image sizes can be viewed here: xd.adobe.com/view/9a63781a-2514-4d75-926f-429d287c5f4e-cf30
As depicted in the design specifications:
- Short text (adjusted column width based on text length)
- Landscape or Portrait Image (image size set in CSS with column width based on image width)
- Longer text (third column width occupies available space left by first two columns)
Find my code snippet and fiddle link provided below for reference:
HTML:
<div id="container">
<span class="part_one">Some text, column adjusts to text length,</span>
<span class="part_two">
<img src="https://images.pexels.com/photos/1169754/pexels-photo-1169754.jpeg"><span class="comma">,</span>
</span>
<span class="part_three">"This section contains only text and fills the remaining space after accommodating text length and image width. It is positioned aligned to bottom of the image, regardless of its height. All lines overflow and break accordingly if the text is lengthy.</span>
</div>
CSS:
#container {
width: 97%;
margin: 1rem 1.4rem;
}
.part_one {
vertical-align: top;
}
.part_two {
margin: 0.3vw 0.2vw 0 0.1vw;
}
.part_two img {
max-width: 46%;
}
.comma {
margin: 0 0.4vw;
}
The issue arises when the last column fails to break correctly and instead moves to the line below the image. Is there a more efficient way to structure this using flexbox?