I'm trying to make a gallery for a website and I'd like the photos to show only within div class="conteudo"
.
I tried to set height
and width
to div
but the photos appear as in the image below, stacked and being displayed outside div
. They should be centered above the 'div id="thumb"'
HTML
<divclass="conteudo" style="height:680px;">
<div id="galeria">
<img id="foto1" src="imgs/002.jpg" alt="">
<img id="foto2" src="imgs/003.jpg" alt="">
<img id="foto3" src="imgs/04.jpg" alt="">
<img id="foto4" src="imgs/05.jpg" alt="">
<img id="foto5" src="imgs/06.jpg" alt="">
<img id="foto6" src="imgs/07.jpg" alt="">
<img id="foto7" src="imgs/08.jpg" alt="">
<img id="foto8" src="imgs/09.jpg" alt="">
<img id="foto9" src="imgs/10.png" alt="">
<img id="foto10" src="imgs/11.png" alt="">
<img id="foto11" src="imgs/12.png" alt="">
</div>
<div id="thumb" class="thumb" style=" display:grid; max-height: 80%;">
<a href="#foto1"><img src="imgs/002.jpg" alt=""></a>
<a href="#foto2"><img src="imgs/003.jpg" alt=""></a>
<a href="#foto3"><img src="imgs/04.jpg" alt=""></a>
<a href="#foto4"><img src="imgs/05.jpg" alt=""></a>
<a href="#foto5"><img src="imgs/06.jpg" alt=""></a>
<a href="#foto6"><img src="imgs/07.jpg" alt=""></a>
<a href="#foto7"><img src="imgs/08.jpg" alt=""></a>
<a href="#foto8"><img src="imgs/09.jpg" alt=""></a>
<a href="#foto9"><img src="imgs/10.png" alt=""></a>
<a href="#foto10"><img src="imgs/11.png" alt=""></a>
<a href="#foto11"><img src="imgs/12.png" alt=""></a>
</div>
</div>
CSS
.conteudo {
background-color: rgba(255, 250, 250, 0.3);
width: 90%;
margin: 0 auto;
position: relative;
border-radius: 50px;
}
.thumb {
width: 200px;
height: 600px;
text-align: center;
display: inline;
float: right;
overflow-x: scroll;
border-radius: 50px;
}
.thumb img {
width: 150px;
padding: 10px;
margin: 0 auto;
border-radius: 100%;
}
#galeria {
overflow: hidden;
text-align: center;
margin-left: 20px;
margin-top: 40px;
height: 675px;
width: 900px;
}
#galeria img {
max-height: 675px;
min-height: 675px;
min-width: 900px;
max-width: 900px;
}