How to get images to sit adjacent to text

HTML-CSS
1

So I’m working on finalising my Tribute Page, the first of several tests to obtain Responsive Web Design certification. I’ve passed all tests in codepen.io, but before I submit my completed test I wanted to make the layout look a little better.

Currently I have about 15 key dates and some text. I also have 15 images that relate to those individual bits of text. But in my code, all the images sit after each bit of text, when really I want them to sit next to each bit of text, horizontally.

So, at the moment it looks like this:

TEXT
IMAGE
TEXT
IMAGE
TEXT
IMAGE

But I want it to look like this:

TEXT IMAGE
TEXT IMAGE
TEXT IMAGE

It feels like there should be an easy way to make this happen, but I can’t figure it out. All the text and images are currently sat within a div element. If helpful I can post the bit of code, but this is my first time posting here and not sure what is too much or too little info.

2

flexbox should do the trick your codepen link to the main site not your code. but don’t worry this guide has your back A Complete Guide to Flexbox | CSS-Tricks - CSS-Tricks :+1:t5:

3

Yep. This is always helpful, it’s difficult to help otherwise :wink:

But if your structure is literally

DIV
  TEXT
  IMAGE
  TEXT
  IMAGE
  ...etc

Then

.theDivTheStuffLivesIn {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

Should work fine for starters. As an explanation, what that does is say:

For the div the text and images live in, tell the browser to display it as a grid and set the grid to have two columns of equal width.

Because it has two columns, it will just automatically put text in first column, image in second column, then new row, text in first column, image in second column and so on.

The value for grid-template-columns would need to be adjusted: you want two columns, so two values, but “1fr” just means “1 relative unit”. If I said “2fr 1fr” the first column would be twice the size of the other. If I said “50px auto”, the first column would be 50px and the second column would fill the remaining horizontal space.

There are a lot of configurable options with grid (for example, want the rows to all be the same height? grid-auto-rows: 1fr;. Want a gap of 10px between every grid element? gap: 10px;). So if you do use above, then take a bit of time to get used to them and keep a reference handy (MDN is good, CSS Tricks grid cheatsheets are good, the CSS Grid by Example site is good, the CSS Grid game is good; it’s quite confusing at first).

1 Like
4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.