Zenithal Zenithal - 2 years ago 106
CSS Question

Can't seem to be able to get images to overlay with each other

I've been trying to make my own automatic image slider, but for some reason I can't seem to get the 3 images that I want shown by default in the correct positions. I want one main image in the middle of a div, and then two more shown on the right (with a smaller width) , cut off with an overflow: hidden. I've tried everything as far as my knowledge of CSS and HTML go and just can't get it looking right. The image below shows what I am trying to accomplish using HTML and CSS.

Image: Very Artistic Image


Answer Source

Have done a flexbox solution for this:

#image1 {-webkit-order: 0;
-ms-flex-order: 0;
order: 0;
-webkit-flex: 8 1 auto;
-ms-flex: 8 1 auto;
flex: 8 1 auto;
-webkit-align-self: auto;
-ms-flex-item-align: auto;
align-self: auto;}

This is the relevant part.

This is the other relevant part:

-webkit-order: 0;
-ms-flex-order: 0;
order: 0;
-webkit-flex: 98 1 auto;
-ms-flex: 98 1 auto;
flex: 98 1 auto;
-webkit-align-self: auto;
-ms-flex-item-align: auto;
align-self: auto;

This is quite complicated to explain, best to check a tutorial on flexbox, it's the layout future anyway.

Here is the link to the pen.


Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download