Comments on: How do you make a layout with pictures down one side of a page matched up with paragraphs on the other side? https://css-tricks.com/how-do-you-make-a-layout-with-pictures-down-one-side-of-a-page-matched-up-with-paragraphs-on-the-other-side/ Tips, Tricks, and Techniques on using Cascading Style Sheets. Tue, 18 Oct 2022 06:44:38 +0000 hourly 1 https://wordpress.org/?v=6.1.1 By: Abas Obot https://css-tricks.com/how-do-you-make-a-layout-with-pictures-down-one-side-of-a-page-matched-up-with-paragraphs-on-the-other-side/#comment-1797446 Tue, 18 Oct 2022 06:44:38 +0000 https://css-tricks.com/?p=343224#comment-1797446 I applied it on my blog and it works. However, the background doesn’t function. I had to adjust the margin from -3 to 0rem and justified the text. I have tried presenting my quotes in different forms to favor my blog visitors but I think applying this grid form is a nice idea. I only had difficulty with the because in blogger, once you tag the body, the CSS would affect an entire blog. I had to use a class and id to effect the code. Thank you so much for sharing this.

]]> By: Geoff Graham https://css-tricks.com/how-do-you-make-a-layout-with-pictures-down-one-side-of-a-page-matched-up-with-paragraphs-on-the-other-side/#comment-1796730 Tue, 16 Aug 2022 12:59:08 +0000 https://css-tricks.com/?p=343224#comment-1796730 In reply to Jacob.

Might try putting the heading and paragraph together in a wrapper, then apply the existing paragraph styles on the wrapper.

]]> By: Jacob https://css-tricks.com/how-do-you-make-a-layout-with-pictures-down-one-side-of-a-page-matched-up-with-paragraphs-on-the-other-side/#comment-1796722 Mon, 15 Aug 2022 23:02:16 +0000 https://css-tricks.com/?p=343224#comment-1796722 How would you do this if you had the same design but wanted a header above the paragraph as well?

<img src="..." alt="..." height="" width="" />
<h1>Header text!</h1>
<p>Text text text...</p>

]]> By: Meredith https://css-tricks.com/how-do-you-make-a-layout-with-pictures-down-one-side-of-a-page-matched-up-with-paragraphs-on-the-other-side/#comment-1787222 Wed, 22 Dec 2021 00:54:15 +0000 https://css-tricks.com/?p=343224#comment-1787222 Hi Chris – I found this thread because I’ve been looking for a way to link text blocks to certain features of an image. Hard to explain, but I saw the effect in a NY Times piece and wondered how easy/hard it would be to achieve. Is this something I’d need to code or perhaps there is an existing solution? Here’s the link if you have ideas, and thank you! https://www.nytimes.com/interactive/2021/04/02/arts/design/shah-jahan-chitarman.html

]]> By: Peter Scott https://css-tricks.com/how-do-you-make-a-layout-with-pictures-down-one-side-of-a-page-matched-up-with-paragraphs-on-the-other-side/#comment-1786920 Mon, 13 Dec 2021 23:50:44 +0000 https://css-tricks.com/?p=343224#comment-1786920 Thank you Chris,

This is exactly what I was looking for. I typically make pages that describe backpacking excursions in our Sierra Nevadas, with lots of images (some of which I can click on to expand), and with each image, provide a paragraph or two of text. So your nice clear example is just right!

]]> By: Jason https://css-tricks.com/how-do-you-make-a-layout-with-pictures-down-one-side-of-a-page-matched-up-with-paragraphs-on-the-other-side/#comment-1775481 Sun, 04 Jul 2021 02:10:44 +0000 https://css-tricks.com/?p=343224#comment-1775481 In reply to Konstantin.

I thought the purpose of the mobile styles (in this case) was to create a stacking effect between the image and the corrosponding paragraph? So in this case should a new stacking context reasonable?

]]> By: Konstantin https://css-tricks.com/how-do-you-make-a-layout-with-pictures-down-one-side-of-a-page-matched-up-with-paragraphs-on-the-other-side/#comment-1775392 Sat, 03 Jul 2021 08:46:19 +0000 https://css-tricks.com/?p=343224#comment-1775392 Have you ever thought about the fact that if we use a negative margin on the elements that reside below the replaced elements (e.g. <img>) like as in this particular example, we have to create a new stacking context for the element that we use a negative margin on? Otherwise the background of the <p> will be below the <img> tag.
As in this case, we have to add position: relative; (or it can be opacity: 0.99;, etc…) to the <p> even though it locates below the image in the DOM.
On the other hand, if we change the <img> to, say, <div> in won’t be necessary and we can use negative margin without creating a new stacking context.

]]> By: Jon https://css-tricks.com/how-do-you-make-a-layout-with-pictures-down-one-side-of-a-page-matched-up-with-paragraphs-on-the-other-side/#comment-1775253 Thu, 01 Jul 2021 14:21:41 +0000 https://css-tricks.com/?p=343224#comment-1775253 You can also add a box-shadow:20px 15px green;
to put a drop shadow on an image. Only if it looks good.

]]> By: Chris Coyier https://css-tricks.com/how-do-you-make-a-layout-with-pictures-down-one-side-of-a-page-matched-up-with-paragraphs-on-the-other-side/#comment-1775238 Thu, 01 Jul 2021 13:57:46 +0000 https://css-tricks.com/?p=343224#comment-1775238 In reply to Nicklas.

ya maybe. If the text is very literally a caption for the image, sure. I wouldn’t say it always has to be (thinking of a list of features where the image is just an arbitrary icon or screenshot or something, and the text isn’t really a caption for it.)

Once you have a wrapper like that “in the way”, this becomes a compelling reason that subgrid exists!

]]> By: Nicklas https://css-tricks.com/how-do-you-make-a-layout-with-pictures-down-one-side-of-a-page-matched-up-with-paragraphs-on-the-other-side/#comment-1775208 Thu, 01 Jul 2021 11:11:31 +0000 https://css-tricks.com/?p=343224#comment-1775208 If the text is connected to the separate images, wouldn’t this be a good usecase for figure and figcaption?

Something along the lines of:

<figure class="thumbnail">
  <img src="..." alt="..." height="" width="" />
  <figcaption>Text text text...</figcaption>
</figure>

But then the grid layout needs to be redefined

]]> By: Jules https://css-tricks.com/how-do-you-make-a-layout-with-pictures-down-one-side-of-a-page-matched-up-with-paragraphs-on-the-other-side/#comment-1775160 Wed, 30 Jun 2021 20:51:13 +0000 https://css-tricks.com/?p=343224#comment-1775160 Eh… use figure and figcaption, maybe? So the text can be related to the image?

]]>