How to set up alternating divs in HTML and CSS? - html

Question

I am setting up a website that has a gallery of images that alternate vertically.
Boiled down, what I've tried is setting a hard coded width to the div (image in the actual website) then used position to situate the right column of divs. Then added the third div which is supposed to sit in left column after the height of the div in the right column.
.large-container {
width: 200px;
height: 100px;
background-color: blue;
color: white;
}
.small-container {
width: 150px;
height: 50px;
background-color: red;
position:absolute;
top: 100px;
left: 200px;
}
<div style="position:relative;">
<div class="large-container">
This is an outer container
</div>
<div class="small-container">
This has been the small one
</div>
<div class="large-container">
This is an outer container
</div>
</div>
Here is the intended outcome:
intended-outcome
Here is the current outcome:
current-outcome
As you can see the second div in the left column sits directly under the first div. I would like it to sit after the height of the right div.

Answer 1

You Can use css grid, this will make it more dynamically and you'll add whatever containers as you want.
.grid {
display: inline-grid;
grid-template-areas: "l1 ." ". s1" "l2 .";
}
.large-container {
width: 200px;
height: 100px;
background-color: blue;
color: white;
}
.small-container {
width: 150px;
height: 50px;
background-color: red;
top: 100px;
left: 200px;
}
.l1 {
grid-area: l1;
}
.l2 {
grid-area: l2;
}
.s1 {
grid-area: s1;
}
<div class="grid">
<div class="large-container l1">
This is an outer container
</div>
<div class="small-container s1">
This has been the small one
</div>
<div class="large-container l2">
This is an outer container
</div>
</div>
You can Read more info about css grid here

Answer 2

This is a good case to not use "position" and to start using css grid. This can be done easly by defining a grid with 2 columns and 3 rows. And then, just laying down the elements as you wish.
Take a look at the followng example:
.container {
display: grid;
grid-template-columns: 200px 150px;
grid-template-rows: 100px 50px 100px;
}
.large-container {
width: 200px;
height: 100px;
background-color: blue;
color: white;
}
.small-container {
width: 150px;
height: 50px;
background-color: red;
}
.item2 {
grid-row: 2;
grid-column: 2;
}
.item3 {
grid-row: 3;
grid-column: 1;
}
<div class="container">
<div class="large-container item1"></div>
<div class="small-container item2"></div>
<div class=" large-container item3"></div>
</div>

Answer 3

You need to remove position: absolute; on the right column item. Then replace left with margin-left: 200px; and top with margin-top: 100px;

Answer 4

Remove position:absolute; and use margin-left:200px instead of left:200px; for .small-container
.large-container {
width: 200px;
height: 100px;
background-color: blue;
color: white;
}
.small-container {
width: 150px;
height: 50px;
background-color: red;
top: 100px;
margin-left: 200px;
}
<div style="position:relative;">
<div class="large-container">
This is an outer container
</div>
<div class="small-container">
This has been the small one
</div>
<div class="large-container">
This is an outer container
</div>
</div>

Answer 5

Change the CSS on the small container to
.small-container {
width: 150px;
height: 50px;
background-color: red;
margin-left: 200px;
}
Leave all the rest as it is.

Answer 6

Have you tried changing left on .small-container to margin-left: 200px;