My goal is to implement a pinterest-inspired layout on my webpage. Each post by a user is contained within a div element. The layout, in a simplified form, can be represented like this:
Post with 11 likes Post with 4 likes Post with 1 like
Post with 9 likes Post with 2 likes
Here is the CSS I utilized for the pinterest-style layout in HTML:
<div class="container">
<div class="post">Post1</div>
<div class="post">Post2</div>
<div class="post">Post3</div>
</div>
and for CSS:
.container {
column-count: 4;
column-gap: 10px;
margin:0 auto;
padding:10px;
}
.post {
display: inline-block;
margin: 0 0 1em;
width: 220px;
}
As I have multiple pages, I aim to include page numbers (which are hyperlinks to other pages) at the bottom of the page. Essentially, I am striving for a layout that appears as follows:
Post with 11 likes Post with 4 likes Post with 1 like
Post with 9 likes Post with 2 likes
Page: 1 2 3 4 5 6 7 8
I have implemented the following CSS:
#bottom{
position: fixed;
bottom: 0;
display: inline-block;
}
The issue arises when the actual result looks like this:
Post with 11 likes Post with 4 likes Post with 1 like
Post with 9 likes Post with 2 likes Page: 1 2 3 4 5 6 7
Upon adding more posts, the layout transforms into this:
Post with 20 likes Post with 7 likes Post with 1 like
Post with 11 likes Post with 4 likes Page: 1 2 3 4 5 6 7
Post with 9 likes Post with 3 likes
Post with 8 likes Post with 2 likes
This occurs because the page believes that right below the "post with 1 like" there is the bottom of the page. How can I position my page number at the true bottom of the page rather than directly beneath a specific post?
Thank you all! I have resolved my issue by applying position:fixed to ensure all page numbers appear at the bottom. Initially, the numbers were condensed together due to being displayed in a PHP loop. By placing the bottom element outside of the loop, I successfully tackled the problem.