0

The footer is at the bottom as intended on my Home page and Form page. But something is causing the footer to appear at the top of my Gallery page. I'm assuming it's an issue with specificity or one of my selectors. But I'm new to this and so far everything I've tried hasn't resolved the issue.

My footer code is basic so something else must be forcing it to the top. I checked the Gallery ID's and none of them appear to be effecting my footer element.

footer {
background:#333333;
color:#FFFFFF;
padding:10px;
}

/* || gallery-items */
.gallery-item {
 text-align:center;
 width:300px;
 height:300px;
 margin:10px;
 background-color:#ADD8E6;
 border:10px solid #333333;
 border-radius:4px;
 float:left;
 object-fit:contain;
 }

 /* || gallery item hover */
 .gallery-item:hover {
 border-color:#03A9FC;
 }

Here is a link to my Replit. I apologize for not being able to asses what the root of the issue. This is my first week doing CSS styling.

3
  • Why not just use position: fixed; bottom: 0; it should do the trick
    – Eytan
    Commented May 6, 2020 at 7:26
  • @Eytan that only works if Tomarik wants his footer always on the bottom, on top of everything else, unless he does some other CSS tricks, but the issue he is having will be fixed with a single HTML element and a line of CSS, keeping the footer working like it does on his other pages
    – Daniel
    Commented May 6, 2020 at 7:35
  • His footer is at the bottom of the other pages, plus the name footer implies so and that's why I posted a comment and not an answer - to get clarification from him
    – Eytan
    Commented May 6, 2020 at 8:39

2 Answers 2

2

Your .gallery-item has float: left; this means that those elements don't get "considered" as taking any space when rendering the other elements on your page. You can put a div with a style clear: both (in your case only clear:left will work) between your gallery and your footer elements to fix this

1

Add overflow: hidden; on #gallery-content

#gallery-content{
  overflow: hidden;
}

Not the answer you're looking for? Browse other questions tagged or ask your own question.