Arranging 3 s in a
in a certain order with css

Question

So I am new to front-end web development and I am struggling mightily trying to arrange 3 tags in a container . Here is the code i have currently:

index.html

<div class='container'>
   <img id="img1" src='https://i.pinimg.com/originals/28/3c/b3/283cb30bbe0b896cfd7bcd8748438504.jpg'>
   <img id="img2" src="https://imagesvc.timeincapp.com/v3/fan/image?url=https%3A%2F%2Fkingjamesgospel.com%2Fwp-content%2Fuploads%2Fusat-images%2F2016%2F04%2F9876462-nba-orlando-magic-at-miami-heat.jpeg&c=sc&w=850&h=560">
   <img id="img3" src= "http://image.nj.com/home/njo-media/width600/img/sixers_main/photo/nba-philadelphia-76ers-media-day-1e8d18e414f7dd9e.jpg"> 
</div>

styles.css

.container {
    background-color: #888;
    border: 1px solid #000;
    border -radius: 20px;
    width: 800px;
    height: 500px;
}

I've created a container div with width and height temporarily set to 800px and 500px. These are generally constant (they change with the window width / height, but that's it). I would like the 3 images to fit in the container div, arranged with the first image to the left, and then the 2nd and 3rd images stacked on top of each other to the right.

This is a picture I made in excel describing how I'd like the pictures arranged. I've tried using auto, max-height, min-height, etc. but none of them fit the container how I'd like... any help with this is appreciated!

Edit - let me know if the image dimensions are needed and I can grab those. Also, if this is something that can be solved with flex-box, which is some css tools i am vaguely familiar with, that may be helpful too!

Can you change the HTML or do you need that exact structure? — Sébastien, Mar 17 '18 at 02:33
There is this div that I think I am stuck working with, that I need to put the images inside of. Doesn't have to be tags. — Canovice, Mar 17 '18 at 02:41

Sébastien · Accepted Answer · 2018-03-18T00:14:54.883

If the proportions of the display blocks are fixed and the image sizes may vary, then your best option might be to put the images in the background of elements with CSS and use the background-size property to let the image fill the container:

.container {
  background-color: #888;
  border: 1px solid #000;
  border-radius: 20px;
  width: 800px;
  height: 500px;
  overflow: hidden; /* this is only needed
                       to preserve the rounded edges
                       of the container */
}

#img1 {
  width: 400px;
  height: 500px;
}

#img2 {
  width: 400px;
  height: 200px;
}

#img3 {
  width: 400px;
  height: 300px;
}

div.container div {
  width: 100px;
  height: 100px;
  float: left;
  background-size: cover;
}

<!-- index.html -->
<div class='container'>
  <div id="img1" style="background-image:url('https://i.pinimg.com/originals/28/3c/b3/283cb30bbe0b896cfd7bcd8748438504.jpg')"></div>
  <div id="img2" style="background-image:url('https://imagesvc.timeincapp.com/v3/fan/image?url=https%3A%2F%2Fkingjamesgospel.com%2Fwp-content%2Fuploads%2Fusat-images%2F2016%2F04%2F9876462-nba-orlando-magic-at-miami-heat.jpeg&c=sc&w=850&h=560')"></div>
  <div id="img3" style="background-image:url('http://image.nj.com/home/njo-media/width600/img/sixers_main/photo/nba-philadelphia-76ers-media-day-1e8d18e414f7dd9e.jpg')">
</div>

Adjust the proportions as needed. You should also be able to optimize the CSS declarations by grouping them better, but this is intentionnally a very explicit example.

ed henderson · Answer 2 · 2018-03-17T03:30:38.180

The width of all images would have to be 1/2 the width of the container.
Image one will have to have full height of the container. The heights of Image 2, and 3 will have to total the height of container. (I usually edit the pics outside of the code such as adobe photoshop, to the widths and heights I desire so that I don't have to use code to do it. Faster load time!) But if you must you can put it width and heights in the code.

After all that my html is:

<div class = "container">
<div id = "image1">
        <img src = "images/ameliapic.jpg" "width = "400px"; height = "500">
</div>
<div id = "image2">
        <img src = "images/BONDED.jpg">
</div>
<div id = "image3">
        <img src = "images/BONDED.jpg">
</div>

my css is:

.container {
background-color: #888;
border: 1px solid #000;
border-radius: 20px;
width: 800px;
height: 500px;
float: left;
}
#image1 {
float: left;   
}
#image2 {    
position: absolute;
top: 1px;
left: 400px;
}
#image3 {
position: absolute;
top: 250px;
left: 400px;
}

The corners on your container are rounded so you will have to round the pics corners accordingly. example for image2 (border-top-right-radius: 20px). You can do the same for other pictures corners. I am also unsure of he position of your container to actual page so I just floated it left. Good Luck! I hope that helps.

Arranging 3 s in a in a certain order with css

2 Answers2

Arranging 3 s in a
in a certain order with css