How to randomly place elements on a web page - html

Question

I need to make an art gallery for my website and I want to take an asymmetric approach by placing the artwork and descriptions randomly across the page with no symmetry. It should look a bit like this, with the colored squares being the divs containing each image and description:
Keep in mind that I also want to include text in each div, so it's not just the images. The max-width of my container is 1504 pixels. Resizing isn't necessary because I have the min-width set to 1504 as well. I don't know much about CSS or HTML as I'm doing this for a school thing. How do I go about making this?

Answer 1

If you don't mind manually coding the positions, you can simply use absolute positioning. Essentially, you'll need to:
Give your container (which might just be the body) a constant width and height. I arbitrarily chose 400x400 in the example.
Add position: relative to your container to allow the content boxes to be positioned relative to the container. This is not necessary if your container is the body.
Add position: absolute to all your content boxes (the .box elements in my example).
Use the top, bottom, left, and/or right properties to position your content boxes as desired.
Here's a (miniature) example:
.container {
/* You can set this to whatever you wish. */
width: 400px;
/* You'll need to set a height. */
height: 400px;
/* Allows positioning relative to this container. */
position: relative;
/* For clarity. */
border: 1px solid black;
}
.box {
position: absolute;
}
.box#one {
width: 90px;
height: 60px;
background: red;
top: 20px;
left: 60px;
}
.box#two {
width: 90px;
height: 100px;
background: blue;
top: 50px;
right: 100px;
}
.box#three {
width: 67px;
height: 76px;
background: purple;
bottom: 100px;
left: 278px;
}
.box#four {
width: 150px;
height: 160px;
background: yellow;
top: 203px;
left: 100px;
}
.box#five {
width: 70px;
height: 50px;
background: orange;
top: 110px;
left: 45px;
}
<div class="container">
<div class="box" id="one">
<!-- You can put your content in here. -->
</div>
<div class="box" id="two">
<!-- You can put your content in here. -->
</div>
<div class="box" id="three">
<!-- You can put your content in here. -->
</div>
<div class="box" id="four">
<!-- You can put your content in here. -->
</div>
<div class="box" id="five">
<!-- You can put your content in here. -->
</div>
</div>