I'm trying to keep the divs close together, but the second row isn't lining up properly and the divs don't have any margin.
My CSS for the div is as follows:
.post {
box-sizing: border-box;
display: block;
float: left;
font-size: 12px;
margin: 0 15px 20px 0;
padding: 0;
text-align: center;
width: 310px;
background: #fff;
border-radius: 4px;
box-shadow: 0.5px 1px 3px 0 #d5d5d5;
padding: 15px 15px 10px;
}
Here is the current appearance:
From my understanding, using CSS alone is not possible to accomplish this task.
For this, a JS solution is required, such as Masonry:
If you prefer not to rely on JavaScript libraries, you can easily create multiple left floating divs (columns) to ensure each post card is displayed correctly below the previous one.
Here's an example:
<div class="column">
post1, post2, ...
</div>
<div class="column">
post1, post2, ...
</div>
<div class="column">
post1, post2, ...
</div>
<style>
.column {float:left;}
</style>
I am looking to incorporate a waiting time animation when submitting a form, and I prefer using SweetAlert over a traditional loading image. Here is the basic code snippet: $("form").submit(function (e) { e.preventDefault(); // prevents def ...
Currently, I am working on creating a list with each list item having a bottom border of 1px solid. The list is then divided into 3 columns using column-count:3 CSS property. For instance, if there are 8 items, it should display 3 items in the first column ...
As a beginner in web development, I am utilizing Angular in conjunction with Bootstrap for a practice project. My goal is to create a header component and integrate it into my app.component. Within the app.component, I aim to have a background image coveri ...
I am in the process of creating a webpage where main.html will load a page with a static header and footer that remains unchanged when navigation links are clicked. I'd like to achieve this using Javascript, with the body content being sourced from an ...
I'm currently facing an issue with the power up feature in my game. Despite successfully displaying the shape on screen, the ball fails to speed up as expected upon collision with the shape. <html> <title>Level Selector</title& ...
Here is my HTML code: <div> <span style="display: inline-block;height:20px">20</span> <span style="display: inline-block;"><img src="img/ex.png"/></span> </div> The image I have in the second span is sized at ...
I'm looking for help with adjusting my background. 1.) I want to align it perfectly with the horizontal navigation bar and the images below it by moving it to the right. 2.) I also need to move it down so that it doesn't show up above the horizo ...
For those who prefer shorter explanations, there's a TLDR at the end. Otherwise, here's a detailed breakdown. I have a form that consists of multiple inputs organized into different "pages" using ng-show. What I aim to achieve is when ng-show r ...
I am currently working on a basic webpage that will showcase a list of disciplines. When a discipline is selected, relevant information will be displayed below. The code snippet available here demonstrates the functionality I am aiming for. However, I hav ...
Looking for a way to implement cache busting in my index.html file. Take a look at the code snippet below: <body> <app-root></app-root> <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="&l ...
I am currently experimenting with displaying hidden text when the mouse enters a div and hiding it when it leaves. Here is the progress I've made on my JSFiddle: $(document).ready(function() { $(".image").mouseover(function(){ $(".hover").show ...
Utilizing Material UI's SwipeableDrawer component, I have successfully created a bottom drawer with a fixed action button container. The container is positioned using position: fixed; bottom: 0;. While this setup works effectively on desktop browsers, ...
I'm curious about code organization. The original code in this snippet is functioning properly: <?php if (isset($_POST['submit'])){ ... ... $invalidField = 2; } ?> <!DOCTYPE html PUBLIC "-//W3C//DTD ...
Does anyone know why the blink effect isn't working on Google Chrome? <p class="blink">at least it's not Comic Sans</p> <style> .blink { animation-duration: 1s; animation-name: blink; animation-iteration-count: infinite; anima ...
I have a URL like http://myurleg.com/ar/Message.html and I need to change ar to en in it when clicked on. For example, if my current URL is: http://myurleg.com/ar/Message.html After clicking, it should become: http://myurleg.com/en/Message.html I attemp ...
I am aiming to achieve two separate scrolling divs and I'm uncertain about the exact approach. Experimenting with various overflow properties has only resulted in one scrolling independently. .profile { width: 100%; display: flex; ...
In this code snippet, I am trying to maintain the scroll position of two blocks by syncing them together. Specifically, I want to hide the scrollbar of the left block while scrolling the right one. If anyone has any suggestions or solutions for achieving ...
I am currently working on aligning text within table cells that have a PNG Transparent background. To achieve this in IE6, I am using the filter:progid:DXImageTransform.Microsoft.AlphaImageLoader() method. However, I am facing an issue where the text is no ...
For my project, I have been tasked with developing a website with a fixed width of 1024px. How can I adapt Twitter Bootstrap's 960px fixed width framework to accommodate for the 1024px width requirement? Are there any disadvantages to designing websi ...
I'm curious about improving website scroll and animation performance. Which option would be better for your mobile webapp or website: Using a repeating thin image or CSS3 gradient? or Utilizing a repeating image instead of box shadow with a borde ...