CSS - Align image to the top right and left without altering HTML - html

Question

I'm picking up website building after a long vacation (~5 years). CSS standards have changed, and I'm still trying to catch up.
Anyway, I'm still very strict on the quality of my html and will not compromise on that for layouting.
Here's my HTML. It can't change, except for the image-right and image-left classes. Those can be replaced by class="right" or class="left" on the corresponding images.
<div class="text-block image-left">
<h2>A block of text with image on the left</h2>
<img src="https://picsum.photos/300/200" alt="A nice picture" />
<p>
This is one paragraph.
</p>
<p>
This is the second paragraph.
</p>
</div>
<div class="text-block image-right">
<h2>A block of text with image on the right</h2>
<img src="https://picsum.photos/300/200" alt="A nice picture" />
<p>
This is one paragraph.
</p>
<p>
This is the second paragraph.
</p>
</div>
The HTML above reflects how I want it to display on a mobile browser: one column with header, image, and then text.
However, on a desktop browser, I want to make it look like this (well, roughly anyway):
What's the appropriate CSS to achieve that layout without altering the HTML, and having a responsive layout?

Answer 1

CSS Grid is awesome, but for this your best bet would be to use Flexbox and it would be good for accessibility to use some semantic HTML5 too.
For your HTML:
<figure class="image-left">
<img src="https://picsum.photos/300/200" alt="A nice picture" />
<figcaption>
<h2>A block of text with image on the left</h2>
<p>This is one paragraph.</p>
<p>This is the second paragraph.</p>
</figcaption>
</figure>
<figure class="image-right">
<img src="https://picsum.photos/300/200" alt="A nice picture" />
<figcaption>
<h2>A block of text with image on the right</h2>
<p>This is one paragraph.</p>
<p>This is the second paragraph.</p>
</figcaption>
</figure>
And for your CSS:
/* Add styling here you wish to add for screens with a width less than 600px */
#media screen and (min-width: 600px) {
/* Add styling here you wish to add for screens with a width of 600px and wider */
figure {
display: flex;
}
figcaption {
width: 100%;
}
.image-left {
flex-direction: row-reverse;
}
.image-right {
/* This is set to flex-direction: row; by default so doesn't need to be added */
}
}
Any problems or need extra help feel free to comment below :)

Answer 2

Here is a way to do it with grid.I only modified the html by adding a class mobile in your text-block divs to get equal specificity for the #media rules (and avoid duplicate CSS).
/* here I define a 4x3 grid */
/* rows are set to auto so the ones not used will collapse */
div.text-block {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows : repeat(4, auto); }
/* here I tell the h2 for .image-left to start a col2 and use 2 columns */
/* each column is 1fr, so 2 columns is 2/3 of the available space */
div.text-block.image-left h2 {
grid-column: 2 / span 2;
}
/* I don't need to position each "p" on rows, just tell them which
column to go to */
/* no need to put them in a div */
div.text-block.image-right p {
grid-column: 1 / span 2; }
/* I use this code to make your image resize automatically,
but there is plenty of choice to make it look the way you want.
You can also check out the "object-fit" property */
div.text-block.image-left img {
display: block;
height: auto;
max-height: 100%;
max-width: 100%; }
/* for the #media rules I needed a .mobile class to have the same specificity
as the first rule (edit : though removing ".text-block" for "p" and "h2"
declarations would have the same effect) */
/* also needed to re-use "justify-self" on images
as it has priority over justify-items */
#media screen and (max-width: 900px) {
/* all blocks */
div.text-block.mobile h2 {
grid-column: 1 / span 3;
}
You can play with grid-template-columns, grid-template-rows to find the "right" proportions for what you need (for example : grid-template-rows: .2fr repeat(2, 1fr) auto;).
If you have questions, I'll be happy to answer them (or try to at least) ;)
html {
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-size: 16px;
}
*,
*::after,
*::before {
-webkit-box-sizing: inherit;
box-sizing: inherit;
}
img,
p,
h2,
div {
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
min-height: 100vh;
}
div.text-block {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(4, auto);
/*grid-template-rows: .2fr repeat(2, 1fr) auto;*/
align-items: start;
justify-items: left;
}
/* first block */
div.text-block.image-left h2 {
grid-column: 2 / span 2;
}
div.text-block.image-left p {
grid-column: 2 / span 2;
width: 100%;
}
div.text-block.image-left img {
display: block;
height: auto;
max-width: 100%;
grid-column: 1 / span 1;
grid-row: 1 / span 3;
}
/* 2nd block */
div.text-block.image-right h2 {
grid-column: 1 / span 2;
}
div.text-block.image-right p {
grid-column: 1 / span 2;
width: 100%;
}
div.text-block.image-right img {
display: block;
height: auto;
max-width: 100%;
grid-column: 3 / span 1;
grid-row: 1 / span 3;
justify-self: right;
}
/* just to show what's going on */
h2 {
background: blue;
}
p {
padding: 5px;
border: white 1px solid;
background: black;
color: white;
}
div.text-block {
background: white;
border: 2px solid green;
}
/* media query */
#media screen and (max-width: 900px) {
/* all blocks */
div.text-block {
justify-items: center;
}
div.text-block.mobile h2,
div.text-block.mobile p {
grid-column: 1 / span 3;
}
div.text-block.mobile img {
grid-column: 1 / span 3;
grid-row: 2 / span 1;
justify-self: center;
}
}
<div class="text-block mobile image-left">
<h2>A block of text with image on the left</h2>
<img src="https://picsum.photos/600/400" alt="A nice picture" />
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quaerat quas eius, ab corporis architecto quam? Soluta, reprehenderit eveniet porro fugiat ratione voluptatum harum ea fuga facilis ad incidunt cumque maiores. Lorem ipsum, dolor sit amet consectetur
adipisicing elit. Eos libero illo repellat sint in culpa itaque est modi, eum officia a laborum iure alias cupiditate tenetur, cumque dolorem deleniti? Eum!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi amet quaerat facere maiores sequi velit totam praesentium adipisci provident aspernatur at commodi, nostrum voluptates esse reiciendis optio rem et impedit!Eveniet ipsa delectus voluptate suscipit
possimus totam qui iusto consectetur sapiente maiores culpa alias, unde enim laudantium libero, consequatur explicabo adipisci non! Non quis optio fugiat, ullam dolorem iure debitis?
</p>
</div>
<div class="text-block mobile image-right">
<h2>A block of text with image on the right</h2>
<img src="https://picsum.photos/600/400" alt="A nice picture" />
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quaerat quas eius, ab corporis architecto quam? Soluta, reprehenderit eveniet porro fugiat ratione voluptatum harum ea fuga facilis ad incidunt cumque maiores. Lorem ipsum, dolor sit amet consectetur
adipisicing elit. Eos libero illo repellat sint in culpa itaque est modi, eum officia a laborum iure alias cupiditate tenetur, cumque dolorem deleniti? Eum!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi amet quaerat facere maiores sequi velit totam praesentium adipisci provident aspernatur at commodi, nostrum voluptates esse reiciendis optio rem et impedit!Eveniet ipsa delectus voluptate suscipit
possimus totam qui iusto consectetur sapiente maiores culpa alias, unde enim laudantium libero, consequatur explicabo adipisci non! Non quis optio fugiat, ullam dolorem iure debitis?
</p>
</div>
Edit :
grid-template-rows: repeat(auto-fit, minmax(50px, 1fr));
This is a way to create rows automaticaly if you want to add paragraph and not change the template.
But there are 2 drawbacks :
A height which do not adjust to the content must be defined (not auto, max-content ...etc)
For now I don't know how to make the image "span" all the "not collapsed rows" automatically. So you will need to increment the span for 'grid-row: 1 / span 3;' for the image each time you add a 'p'