Blog Format Featuring Side-by-Side Columns

Is there a way to achieve horizontal columns that don't cut off articles and flow seamlessly into the next column? I want the columns to have varying heights, such as Post A at 60% height, followed by Post B at 40% height, then Post C at 30%, and finally Post D at 70%.

I attempted to use the code below, but it does not provide the desired scrolling experience.

#featured-posts-container {
    -webkit-column-count:  4;
    -webkit-column-gap:  10px;
    -webkit-column-fill:  auto;
    -moz-column-count:  4;
    -moz-column-gap:  10px;
    -moz-column-fill:  auto;
    column-count:  4;
    column-gap:  15px;
    column-fill:  auto;
    margin-top: 15px;
}

Answer №1

It appears to me that what you're seeing is not a column, but actually a background-color.

The developer likely set the text elements to display inline, giving the illusion of a column due to the lack of margin between paragraphs. In reality, it's not a true column at all.

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

CSS transitions do not function properly in Mozilla browsers

I have been attempting to create a hover animation transition on my website. It seems to work fine in Opera and Chrome, but not in Mozilla Firefox. Can anyone provide guidance on how to fix this issue? Here is the code I am currently using: HTML <a hr ...

Put the title tag within a script in the shell

Within an HTML snippet, I currently have a <title> tag that I need to change on a monthly basis when generating reports. While I can manually update it each month, I am looking for a way to automate this process so the title reflects the relevant rep ...

Rotating arrows enhance the functionality of the accordion menu

I have successfully implemented a basic accordion with rotating arrows on click. Everything is working smoothly except for one issue: When I collapse one item and then try to collapse another, the previous arrow does not return to its default state. Is ...

"Unveiling the invisible: Revealing hidden characters in PHP

Currently I am dealing with some code extracted from a MySQL column. Within this code are hidden characters like "\t" and "\n". I am attempting to showcase the raw code in a DIV while also making sure these hidden characters are visible. The cod ...

Breaking down a jQuery array into separate JSON objects

Hi there, I am currently working on constructing a post request. Here is the format I need to send: const data = { categories: [ { id: 9 }, { id: 14 } ], } However, what I have is ["29", "23", "22&quo ...

What is the best way to retrieve data from a POST request?

I am attempting to post data from the same site and create a new order when the submit button is clicked. However, I am not receiving any information in my req.body, leading me to suspect that there may be an issue with my ejs file. Any feedback on this ma ...

CSS - when "start" is not 1, an alternative to the "nth-child" selector

Imagine a scenario where you have a list of questions that start at 0 and you want to apply CSS styling based on their value. For instance, consider the following list... <b>How are you feeling?</b> <ol start="0"> <li>Great< ...

What are some ways to keep the text within the boundaries of the input box?

How can I prevent the letters from extending beyond the bar when typing a lot of characters? Your assistance in resolving this issue is greatly appreciated. <div id="tasks-container"> <div id="tasks-header"> ...

JavaScript library for creating animated car movements on a map using JPG images

Looking for a way to animate a car's movement on a map? I have a map image in jpg format (not svg) and a sequence of (x,y) points ready to go! If you could recommend a JavaScript library that can help me easily create an HTML page with this animation ...

Guide to dynamically modify the font family value of the entered text

I have a simple question regarding customizing font styles. I have an input text field and a drop-down list with various font family options. My goal is to display the text entered in the input field in the selected font style from the dropdown list. Can ...

jQuery Mobile is experiencing page height inaccuracies

My web application, built with jQuery Mobile 1.2.0, is encountering an issue with page height calculations on Windows Phone. While iOS and Android display correctly, there is a gap at the bottom of the page on Windows Phone. Is there a CSS-only solution t ...

Implement a loading spinner to display each time a computed method is invoked in a Vue.js

Whenever a checkbox is checked, my filtering method gets triggered. I am trying to implement a loader that displays while the filter process is ongoing and then shows the results. However, I have encountered an issue where the loader remains visible at all ...

Ways of accessing an array within an if statement

I have a dashboard with admin privileges for my application. In this dashboard, the admin can select a user from a dropdown list. Once a user is selected, I make an AJAX call to retrieve the user's data and store it in a variable named $result. Howeve ...

Add JavaScript and CSS files from the node_modules folder to enhance a static HTML webpage

Currently, my development server is set up using node's live-server. However, for production, I plan to use a LAMP server. Within my node_modules directory, I have the normalize.css file. In my index.html, I currently link to it like this: <link ...

Using JavaScript, the list of items (images) will be displayed and placed into HTML panels

Below is the layout structure on my website: <div class="panel-heading"><h3 class="panel-title">Suggestions</h3></div> <div class="panel-body"> <div class="col-md-7"> <h3><span class= ...

Achieving unique proportions with HTML5 video resizing

On my page, I plan to showcase a video specifically for desktop browsers. I have devised some code to determine whether the video is in landscape or portrait orientation. The challenge lies in deciding what to do based on this orientation: If the video is ...

Executing a .sh script upon loading a webpage

Is there a way to automatically run a .sh file on webpage load to fetch a JSON file using cURL, without making it visible? I need to keep the API key confidential. ...

Exploring the ID search feature in JavaScript

I'm facing an issue with implementing a search feature in my project. Here is the HTML snippet: HTML: <input type="text" id="search"> <video src="smth.mp4" id="firstvid"> <video src="smth2.m ...

Customize the border of the Tab indicator within Material UI

I created a custom NavBar with a unique tab indicator implementation: indicator: { background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)', }, <Tabs classes={{indicator: classes.indicator}} onChange={handleClickTab} value={value}> ...

Using the jqueryRotate plugin to rotate an image by 90 degrees

Is there a way to rotate images on a webpage using the JQueryRotate script? I have 10 images that I want to be able to rotate when clicked, but I'm not sure how to implement it. Any assistance would be welcomed. This is the HTML code for the images: ...