After searching on SO and not finding a solution, I need help with listing images in both the left and right columns. The images will vary in size and I'm unsure if my current approach is correct. Here is an excerpt from my HTML file:
<div class="six">
<ul><img class="left" src="" width=250/></ul>
<ul><img class="left" src="" width=250/></ul>
<ul><img class="left" src="" width=250/></ul>
<div align="center">
<h1>Pictures</h1>
<input type="text" id="gif">
<button id="sbmt">Submit</button>
<img src="" width=250/>
<div>
<ul><img class="right" src="" width=250/></ul>
<ul><img class="right" src="" width=250/></ul>
<ul><img class="right" src="" width=250/></ul>
</div>
The CSS styling for the images is as follows:
.left{
align-content: left;
width:fit-content
}
.right{
align-content: right;
width: fit-content;
}
I have attempted to arrange the images in the layout shown above, but it seems like there might be an error in my code. Despite trying various techniques found on SO, I haven't been able to make it work.