Make image fall in line?

HTML & CSS
1

Any simple way I can make the third image on the bottom of the page stay in line with the others regardless of viewport size? It’s currently positioned higher due to the other two images having longer titles above them, which push them down as the viewport gets smaller and the text drops down.

Thanks.

2

Hi,

Your fiddle doesn’t seem to show the question you are asking as the last image has wrapped to a new line and is thus lower than the other images and not higher.

Assuming your real page shows the correct design then I’m guessing that the bottom of the third image in the row is not aligned with the other two images due to wrapping text above the first two images. In these cases when using flex box you can set the child flex items to be flex containers also and align the content to the bottom like so.

.ImgContainer{display:flex;flex-direction:column}
.ImgContainer p + p{margin-top:auto}

If I’ve misunderstood then you may need to provide a better example for me to see the problem :slight_smile:

1 Like
3

It’s wrapped to a new line for you because you’re viewing it in a small window. What I’m refering to is the state it is in prior to wrapping.

1233×967 359 KB

Actually I have two issues. The text wrapping causing the differing positioning as well as the container retaining its height when the content inside of it shrinks. With things being the way they are, aligning the images to the bottom would look silly.

4

I’m viewing on a 2560px monitor but it makes no difference because your fiddle is setting a max-width of 856px anyway,

2560×978 91.6 KB

If you can provide a link to the page in question it would help as the fiddle doesn’t seem to match what you are asking :slight_smile:

2 Likes
5

http://onshirazu.netai.net/Index.html

Here you go. I also have an issue with the content container moving slightly to the right when making the window skinny. An unintended side-effect of trying to make it so the vertical scroll bar when it appears doesn’t move the content to the left.

If you’ve any idea how to implement such a fix in a bug-free manner I’d be grateful for that as well.

6

Hi,

The first answer (which I guessed at) is in fact correct to fix the alignment of the image but you seem to have implemented it incorrectly.

I said set the second p element in the imgcontainer to have a margin-top of auto but you set all p elements in the imgcontainer to have a margin-top of auto thus cancelling out the effect that i set.

You need this:

.ImgContainer{display:flex;flex-direction:column}
.ImgContainer p {margin-top:0}
.ImgContainer p + p{margin-top:auto}

Auto margins in flex layouts tell the element to take up all that space on that side. Therefore it’s only the last p element that needs a top auto margin in order to push it to the bottom of the flex container.

As regards the image height then seeing as you are using images of the same aspect ratio I would not use object-fit but simply set width to 100% and height to auto.

e.g.

.ImgContainer img {
    min-width: 150px;
max-width:280px;
    /* object-fit: contain;
    object-position: 0 0;*/
    margin: 0;
    width: 100%;
    height: auto; 
}

You are adjusting the width with this hack:

body {
    padding-left: calc(100vw - 100%);
}

While that allows a centred element to remain still when a vertical scrollbar appears it affects the layout when the layout is as wide as the viewport so I suggest you set a media query at around 860px and remove that padding-left.

However, I think its overkill to manage layouts to that precision and to worry about layout positions when vertical scrollbars appear and best to let a browser do what it does best naturally.:slight_smile:

2 Likes
7

That fixed it beautifully. Thanks!
The reason I want the scrollbar to not move the content is because it pushes the content out of line with the navbars (the content is inside of an iframe and the rest of the page isn’t).

8

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