Struggling all day to figure out how to create a Tumblr-style grid for my website, I'm reaching out here for some assistance. Here is the page: I have a grid of images on my project page that initially looked fine, but as I try to add new elements, it's starting to look messy. Take a look at this screenshot. I've attempted various solutions, but there always seems to be a white gap present (even when it shouldn't be). For reference, here's an example of what I am aiming for:
Here is the HTML code (including filter):
<div id="myBtnContainer">
<button class="btn active" onclick="filterSelection('all')"> ALL</button>
<button class="btn" onclick="filterSelection('imprime')"> PRINTED</button>
<button class="btn" onclick="filterSelection('digital')"> DIGITAL</button>
<button class="btn" onclick="filterSelection('picture')"> PHOTO</button>
</div>
<div class="pic"> <a href="ego_graphique.html"><img class="filterDiv picture" src="images/ego5-4.jpg" alt="graphic ego" style="width:40% "> </a> <a href="institut_poincare.html"><img class="filterDiv imprime" src="images/ihp1_1.jpg" alt="posters for henri poincaré institute" style="width:25%"> </a> <a href="jpo_gat_17.html"><img class="filterDiv imprime" src="images/jpogat17.png" alt="open house gué à tresmes high school 2017" style="width:25%"></a><a href="details_et_des_tailles.html"><img class="filterDiv imprime" src="images/detailbook1.jpg" style="width:35%"></a> <a href="experience_de_la_duree.html"><img class="expav filterDiv digital" src="images/expavstatic.png" alt="time experience" style="width:35%" ></a></div>
And the CSS:
html {
position: relative;
min-height: 100%;
}
body {
background: white;
font-size: 20px;
font-family: Helvetica, Arial, sans-serif;
line-height: 25px;
margin: 0 0 900px; /* bottom = footer height */
padding: 25px;
}
.img{
margin: 20px;
}
/* FILTER */
.container {
overflow: hidden;
}
.filterDiv {
float:left;
width: 100px;
line-height: 100px;
text-align: center;
margin: 13px;
display:none;
}
.show {
display: block;
}
.pic
{
max-width: 100%;
}
I’m still learning HTML and CSS, so I acknowledge that my code may not be perfect or optimized yet. Please excuse any language errors, English is not my native tongue.
Thank you for your assistance!
EDIT @ben_fluleck
Thanks for your reply. The "height: 100%" causes distortion in the aspect ratio of my images. When I use "max-width" and "max-height" instead of "height" and "width", the white gap reappears. Additionally, I need to maintain the "display: none" on filterDiv for the filtering functionality (which involves JavaScript). Currently, the filtering works, but the images are not showing correctly (before:image, after:image). Filtered elements seem to leave a white space instead of disappearing. I tried adapting some Tumblr HTML without success. Simple tasks prove challenging... I really need a solution that automatically adjusts sizing like a Tumblr theme, as adding new content will likely lead to further disarray. I understand the footer implementation needs improvement; I managed to create it based on available resources, but it's still not ideal. Thank you again for your help! Let’s address the footer later; right now, resolving the grid issue is my priority.