What could be the reason my divs are not aligning to the top?

I'm having an issue with displaying posts one under the other. They are showing up one by one as intended, but not one under one. Here is a visual representation:

In the image provided, you can see that there is a gap between the 1st and 4th post. I want to eliminate that gap. I attempted using vertical-align:top but it didn't solve the problem. When I tried using float:left, the layout changed like this:

I have searched for solutions on various platforms, including Stack Overflow, but none of them seem to work for my case.

.social-links {
  width:350px; display:inline-block; vertical-align:top; margin:5px;
}
<div class="social-links" >  
  <iframe some-links-based-on-posts></iframe>
</div>

For better understanding, here's the link to the page: ebosscanada.com/all-social-links/

htmlcss

Answer №1

A potential resolution could involve implementing the "column-count" property

Revise the code snippet below:

.td-page-content {
    padding-bottom: 26px;
}

With this updated version:

.td-page-content {
    padding-bottom: 26px;
    -moz-column-count: 3;
    column-count: 3;
}

Answer №2

To implement this design for your website, apply the following CSS styles to the .social-links container:

.main-content-container {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    height: 100vw;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Creating multiple Google markers based on addresses retrieved from a database using PHP

I have a requirement to display multiple Google markers on a map based on addresses stored in a database. I have already successfully loaded an XML file to retrieve latitude and longitude coordinates, but now I need assistance on how to create multiple m ...

phpjqueryhtmljsongoogle-maps

On initial loading, Materialize JS seems to experience technical difficulties

Struggling to develop a Vue.js SPA chat application, encountering issues with Materialize CSS and JS. The JS doesn't function properly on initial load and requires a page reload to work. No errors are appearing in the console, making it challenging to ...

javascriptcssvue.jsmaterialize

Changing up the grid with alternating colors

I am looking to create a two-column grid layout with alternating colors for the grid blocks. However, using just nth-child(odd) or nth-child(even) won't give me the desired outcome. I believe I can achieve this by utilizing some clever nth-child tech ...

htmlcsslayoutgridcss-selectors

Bootstrap cards have a fixed width and do not wrap

I've been diving into Django and although I'm fairly new to CSS, I managed to put together a page displaying various products using Bootstrap cards. https://i.sstatic.net/xme5m.png It appears that my code should have wrapped these cards pr ...

javascripthtmlcssbootstrap-4

Tips for reducing image file size using AngularJS on the client side

Could someone please advise on the best way to compress image size before sending it to a Spring Java service in an AngularJS application? I attempted using 'canvas', but encountered issues with the image file losing its input stream when transmi ...

javascriptjavajqueryhtmlangularjs

Hierarchy Navigation Menu

As someone new to the world of JavaScript and CSS, I have been experimenting with adding a menu from an example on W3Schools. The code is functioning correctly, but now I'm looking to take it a step further by creating a multi-level menu with 2 levels ...

htmlcss

Tips for maintaining responsive resizing in Bootstrap 4 when the screen size decreases for an image that doubles as a hyperlink

Is there a way to make the images in the second container switch from a vertical layout on the right to a horizontal layout under the first container as the screen size decreases? The images should also resize to get smaller accordingly. The issue seems to ...

htmlimagebootstrap-4

Minimize excessive white space in cases of text overflow, ensuring that text is limited to a maximum of 2 lines

When text exceeds its container, it automatically adjusts the width of the parent element and fills up any extra white space even after overflow. I'm trying to find a solution to allow for text overflow while still restricting it to just 2 lines and r ...

htmlcss

The custom component at the beginning of the MDX file in a Next.js project is not adhering to the

My nextjs project is running on the following versions: "@mdx-js/loader": "^2.1.5", "@mdx-js/react": "^2.1.5", "@next/mdx": "^12.1.6", "next": "^12.1.6", Within my project, I ...

htmlreactjsnext.jsmdxjs

Embed JavaScript code from an ASP.NET webpage into an HTML page on a separate domain

Is it possible to inject JavaScript code from an asp.net page into an HTML page on a different domain, such as http://www.codeproject.com/? How can I achieve this injection from my application? I am currently developing a plugin similar to Pinterest. When ...

c#javascriptjqueryhtmlasp.net

Display a list of personalized post types and emphasize the item that is currently being viewed

I've created a unique type of post called 'product'. Every product page has a sidebar listing all products, with the current product displayed in bold text. For instance, when viewing product 3, it should appear like this: Sidebar Pr ...

phpcsswordpress

What is the best way to align 3 boxes on the same line?

Below is the code that I have written: <!-- Home Boxes Section2 --> <?php for($bx=1; $bx<2; $bx++) { if( get_theme_mod('page-setting'.$bx)) { $bxquery = new WP_query('page_id='.get_theme_mod(' ...

htmlcss

How jQuery stops the submission of a form

Sample HTML Code <p><select name="status" class="form-control" id="showThisItem"> <option value=""> Select Status </option> <option value="Paid"> Paid </option> <option value="Unpa ...

javascriptjqueryhtmlcss

Guide to changing the border color in a Material-UI TextField component styled with an outline design

To complete the task, utilize the Material UI outlined input field (TextField component from "@material-ui/core": "^4.12.2",) and apply a custom blue color style to it. Here is the outcome of my work: https://i.sstatic.net/lw1vC.png C ...

javascriptcssreactjsmaterial-ui

What is the best way to bring up the keyboard on an iPhone when focusing an HTML text field?

Currently working on developing a web app for iPhone, and looking to implement a feature where a text field is automatically focused upon page load, prompting the keyboard to appear. Despite attempting the standard Javascript method: input.focus(); I see ...

javascriptiphonehtml

Tips for incorporating media queries into angular component's styles.scss

I've been attempting to implement media queries in my component's styles, but unfortunately, when I resize the window, nothing seems to happen. @media query screen and (max-width: 768px) { /* Insert changes here */ } It's completely unres ...

htmlcssangularmedia-queriesresponsive

Exploring ways to adjust font and table dimensions with the use of <style type="text/css"> in rmarkdown

Could someone assist me in adjusting table cell sizes on rmakrdown? I attempted to add the following code, but it did not have any effect on the tables within the document: <style type="text/css"> } td { /* Table */ font-size: 12px; border-c ...

csshtml-tabler-markdown

Getting the values of several labels using a class name - a comprehensive guide

Is there a way to retrieve the values of labels with the "timeAuction" class? I'm currently working on a JavaScript function that will target each label with the class name timeAuction and adjust its value. The number of labels with this class can va ...

javascriptjqueryhtml

Highlighted keyword: Unusual mouse movements

I am utilizing the Summernote plugin from Summernote to craft an aesthetically pleasing textarea, and adding the Mark.js plugin from Mark.js to highlight a specified keyword (such as foo) within that textarea. This is the HTML code I have: <div id="te ...

javascriptjqueryhtmltextareasummernote

Troubleshooting issues with linking tabs to pages in JavaScript

I've been working on creating tabs in HTML using this sample: In my project, I am exploring the possibility of adding subpages within each tab. A navigational arrow positioned at the lower end of the tab content directs users to additional informatio ...

javascripthtmldomtabs