How to place images in the middle stacked separated by space

asasass · September 4, 2023, 2:23am

I’m not sure if I’m doing this correctly.

I made an attempt that is below this one.

body{
width: 1500px;
background: orange;
}

.outer {
  display: flex;
  flex-wrap: wrap;
  min-height: 500px;
  margin: 20px;
  justify-content: center;
  align-content: center;
  max-width: 1500px;
  gap:350px;
  background: white;
 
}

<div class="outer">

	<img src="https://fakeimg.pl/350x474"  style="width:350px" alt="Image 1">
	<img src="https://fakeimg.pl/350x474" style="width:350px" alt="Image 2">

  </div>

My Attempt

What I am trying to do here is.

One image on the left, one on the right, then have images stacked in the middle separated by space.

https://jsfiddle.net/2y14xd9n/1/

<div class="outer">

  <img src="https://fakeimg.pl/350x474" style="width:350px">

  <img src="https://fakeimg.pl/100x50" >
  <img src="https://fakeimg.pl/100x50" >
  <img src="https://fakeimg.pl/100x50" >
  <img src="https://fakeimg.pl/100x50" >
  <img src="https://fakeimg.pl/100x50" >
  <img src="https://fakeimg.pl/100x50" >
  <img src="https://fakeimg.pl/100x50" >

  <img src="https://fakeimg.pl/350x474" style="width:350px">

</div>

m_hutley · September 4, 2023, 7:23am

Well, its doing what you told it to do.

If you’ve got (counts) 9 items in a flex container with wrapping, and have told it to put a gap of 350px between the elements, two of which are 350px wide and the rest 50px… you’d need a screen (maths) 3850 pixels wide for it all to show up on one line (3890 with the margin on both sides of the container). Course, you’ve also specified that the max width of the container is 1500 pixels, so it’s definitely going to wrap.

What exactly were you expecting?

asasass · September 4, 2023, 7:27am

I want the 7 images to appear in the empty space that is in the middle.

m_hutley · September 4, 2023, 8:14am

With a 350px gap between each of them?

asasass · September 4, 2023, 8:17am

With a vertical gap between them.

m_hutley · September 4, 2023, 8:21am

.outer {
  display: flex;
  flex-wrap: nowrap;
  min-height: 500px;
  margin: 20px;
  justify-content: space-between;
  background: white;
}

asasass · September 4, 2023, 9:17am

The images should be stacked vertically, not horizontally.

m_hutley · September 4, 2023, 9:22am

so… how much of a gap should be between the images? There’s not a natural gap there, because you havent specified a min height that makes sense for these dimensions.

.outer {
  display: flex;
  min-height: 500px;
  margin: 20px;
  background: white;
  flex-direction: column;
  gap: 20px;
}

PaulOB · September 4, 2023, 10:45am

This is another guess as its still unclear to me what the desired result should be.

The html needs the extra div to hold the middle column to avoid using loads of magic numbers.

asasass · September 4, 2023, 11:01am

The code here, how do I do what you just did there?

How do place images in the middle?

How would I be able to stack images in the middle here?

The desired result would be to be able to absolutely place images anywhere in the middle.

https://jsfiddle.net/m61ky4oa/

body {
  width: 1500px;
  background: orange;
}

.outer {
  display: flex;
  flex-wrap: wrap;
  min-height: 500px;
  margin: 20px;
  justify-content: center;
  align-content: center;
  max-width: 1500px;
  gap: 380px;
  background: black;

}

.book1 {
  height: 500px;
  width: 540px;
  display: block;
  background-image: url('https://fakeimg.pl/167x123/eb0707/909090');
  background-size: 180px 250px;
}


.book2 {
  height: 500px;
  width: 540px;
  display: block;
  background-image: url('https://fakeimg.pl/167x123/074feb/909090');
  background-repeat: repeat;
  background-size: 180px 250px;
}

<div class="outer">
<div class="book1"></div>

<div class="book2"></div></div>

m_hutley · September 4, 2023, 11:10am

ohhh. See, I didnt understand what was being requested lol.

PaulOB · September 4, 2023, 11:38am

Well its much the same as I already explained but changed to suit your html again.

Of course (as usual) there are questions to be asked about responsiveness as you seem to love fixing everything at enormous widths that only fit your screen

asasass · September 4, 2023, 11:44am

The white area is not the same width as how I have mine.

And I would want to be able to absolutely place the middle images.

It can’t be done with how I have my code set up here?

Will it not work?

https://jsfiddle.net/m61ky4oa/

body {
  width: 1500px;
  background: orange;
}

.outer {
  display: flex;
  flex-wrap: wrap;
  min-height: 500px;
  margin: 20px;
  justify-content: center;
  align-content: center;
  max-width: 1500px;
  gap: 380px;
  background: black;

}

.book1 {
  height: 500px;
  width: 540px;
  display: block;
  background-image: url('https://fakeimg.pl/167x123/eb0707/909090');
  background-size: 180px 250px;
}


.book2 {
  height: 500px;
  width: 540px;
  display: block;
  background-image: url('https://fakeimg.pl/167x123/074feb/909090');
  background-repeat: repeat;
  background-size: 180px 250px;
}

<div class="outer">
<div class="book1"></div>

<div class="book2"></div></div>

asasass · September 4, 2023, 12:05pm

I almost have it working here.

When the window is moved up and down, the image keeps moving.

How do I prevent that?

https://jsfiddle.net/4e2k19vo/2/

.book3 {
  height: 94px;
  width: 500px;
  display: block;
  background-image: url('https://fakeimg.pl/500x94');
  background-repeat: no-repeat;
  background-size: 500px 94px;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
}

PaulOB · September 4, 2023, 12:12pm

No I’ve told you before you can’t lay out responsive sites with absolute positioning.

I gave you the answer you just need to change it to match your desired outcome.

No need to absolutely place anything as the code I gave will do what you want. If you don’t want it responsive then use fixed widths but then that will only work for you.

You are going down a dead end with your approach even if it appears to work.

PaulOB · September 4, 2023, 12:20pm

Yopu absolutely placed the element in relation to the body and not the outer. You would need position:relative on .outer in order to keep track.

e.g.

.outer {
  display: flex;
  flex-wrap: wrap;
  min-height: 500px;
  margin: 20px;
  justify-content: center;
  align-content: center;
  max-width: 1500px;
  gap: 380px;
  background: black;
  position:relative;

}

Of course as I said above this only works for the one image and is pretty pointless just like your 350px gap.

asasass · September 4, 2023, 12:21pm

I am making an image so I can screen capture it.

asasass · September 4, 2023, 12:24pm

Thank you for that.

lara · September 5, 2023, 10:56am

There are few suggestions for you, hope these suggestions could help you solving the issue:

If you use the same ID for multiple elements you may face trouble with CSS selectors because This is not a valid HTML. Using classes is more appropriate.
Inline Styles don’t suit your elements. That makes your codes less manageable.Use external or internal style sheets instead and then try applying style to the classes or elements you are willing to…

I wouldn’t recommend you to use flexbox alone that will not provide you required results. It will align items in a single row or column depending on the flex direction. Use flexbox and grid together.