Excess gaps found in dual-column bulleted list

I am trying to create a two-column list that fills items from left to right and then downwards. However, I am facing an issue with unwanted spacing when a multiple line item appears on the right side. Take notice of the extra space to the left of 'Big Coffee'. This is causing too much space above 'Tea' in the left column due to the 'Big Coffee' item spanning two lines. My goal is to eliminate this excess space and stack the items with just a 3% margin.

How can I stack the list items below one another without these additional spaces? Below is a snippet of my HTML code:

<html>
<head>
<title>Sample Page</title;
javascriptjquerycssangularjshtml

Answer №1

Adjust the margin values to suit your needs, like this:

li{
    float: left;
    width: 40%;
    display: block;
    margin: 3% 0;
    background: beige;
}


<html>
<head>
<title>Sample Page</title>
<style>
li{
    float: left;
    width: 40%;
    display: block;
    margin: 3% 0;
    background: beige;
}
.list_container{
width:200px;
}

</style>
</head>
<body>
<div class="list_container">
<h2>Sample List</h2>
 <ul >
 <li>Coffee new coffee new</li>
<li>Tea</li>
<li>Milk</li>
 <li>Big Coffee</li>
<li>Tea</li>
<li>Milk</li>
 <li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
    </ul>

 

</div>
</body>
</html>

Hopefully that was helpful.

Answer №2

Make sure to specify clearly in your CSS 'margin' property which sides you want to adjust.

li{
    float: left;
    width: 40%;
    display: block;
    margin: 3%; /* this will evenly space all sides by 3% */
    background: beige;
}

Understanding the Margin Property

margin: [top] [right] [bottom] [left]

Example:

li {
   float: left;
   width: 40%;
   display: block;
   margin: 3% 0 3% 0; /* This sets top and bottom margins to 3% and right/left margins to 0 */
   background: beige;
}

Explaining margin:10px 5px 15px 20px;

  • Top margin: 10px

  • Right margin: 5px

  • Bottom margin: 15px

  • Left margin: 20px

Explanation of margin:10px 5px 15px;

  • Top margin: 10px

  • Right and left margins: 5px

  • Bottom margin: 15px

Describing margin:10px 5px;

  • Top and bottom margins: 10px

  • Right and left margins: 5px

Showing margin:10px;

  • All four margins are set to 10px

For more information, visit this source.

Answer №3

You are able to modify the width to 50% and adjust the margin to 3% 0.

The final CSS code will appear as follows: 

li {
    float: left;
    width: 50%;
    display: block;
    margin: 3% 0;
    background: beige;
}

I trust this solution proves useful for your needs.

Answer №4

To remove the specific gap, implement the following jQuery script:

$('li').each(function() {
   var liHeight = $(this).height();
   if(liHeight > 18) {
     $(this).next("li").css({"margin-top":"0","margin-bottom":"0"});
   }
});

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

The remote rule in the jQuery Validate plugin does not return a boolean value

Is there a way to call a servlet using a remote field in jQuery validator to check if an already inserted username exists? The challenge is that the call needs to be made using JSONP, and the response is not a boolean or string but a JSON object with possi ...

jqueryajaxjquery-validatejsonp

Google Charts displays currency values without decimal places

I've been working on a project that involves the Google Visualization API. I successfully formatted the y-axis values of my chart to display in currency using vAxis: {format: 'currency'} in the options. However, I'm struggling to figure ...

javascripthtmlcsschartsgoogle-visualization

What is the best way to transfer a querystring received in Node.js to a page being shown through res.render?

I have a nodejs file where I am rendering a page named foo.html. Within foo.html, I am using ajax to retrieve variables from a querystring and load an appropriate xml document based on those variables. The issue arises when I run my nodejs server, which is ...

javascriptajaxnode.js

Activate trust proxy in Next.js

When working with Express.js, the following code snippet enables trust in proxies: // see https://expressjs.com/en/guide/behind-proxies.html app.set('trust proxy', 1); I am attempting to implement a ratelimit using an Express middleware that is ...

javascriptnode.jsnext.js

Achieving Varied Line Heights in a CSS Flexible Grid Column Layout - Vertical Text Alignment Tips for Top Placement

Currently, I am designing a web layout that requires a flexible column structure with varying line heights. The main objective is to have one column with a higher line-height while ensuring that both paragraph texts in different columns start from the same ...

htmlcsscss-grid

Having trouble applying CSS styling to the div element

I'm new to CSS and struggling with aligning content within a div. Specifically, I can't get the actual price (striked off) to display next to the discounted price in the card - it keeps appearing underneath. Any ideas on how I can improve my CSS ...

htmlcssangular

Images in Android webview disappearing after first load

When it comes to loading a local HTML file with local images into a WebView on Android, everything seems to work fine on emulators and newer devices. However, I encountered an issue with a much older device running Android 2.3.4. Initially, the images disp ...

javajavascriptandroidhtmlwebview

What is the process of developing an input formatting directive in AngularJS?

I am a beginner in AngularJS and I want to create a custom directive that removes leading zeroes. For example, if I enter 00014, I want the input field to display 14. I have some existing code but I'm not completely confident that it's correct: ...

javascripthtmlangularjs

Unable to set Object[] as an Observable<Object[]>

Currently in the midst of tackling an Angular 4 project, I have been able to troubleshoot most issues on my own so far. However, there is one error that has me stumped. I am attempting to use *ngFor (async) to showcase a list of Observable objects. Despit ...

javascriptangulartypescript

Using the React Router <Link> component inside a conditional ternary statement

I am trying to incorporate a Ternary operator into React JSX, specifically for creating a conditional React Router Link tag like so: <Table.Cell>{`${user.company !== null ? <Link to={`/companies/${user.company._id}`}>`${user.company.name}`< ...

javascriptreactjsreact-routerjsxternary-operator

Troubleshooting AngularJS UI Router -> Issue with resolution when implementing ui-sref

I have successfully set up a JSON file containing my ui-routes. However, I am encountering difficulties when using the Link functionality. I have managed to use it for the following state: { "name": "home", "url": "^/home", "abstract": false, ...

javascriptangularjsweb-applicationsangular-ui-router

Making an API call using jquery and getting an empty response

I've been struggling to tweak an API call to load via jQuery after the page has loaded. While someone else assisted me, I still can't seem to get it working. The code is in PHP, and I'm not entirely sure if the syntax is correct. - Take a ...

jqueryhtmljsonajaxapi

The tools needed for securing a web application with ExpressJS include the use of

I recently implemented an upload function using connect-form with formidable and https://github.com/ctavan/express-validator. While attempting to sanitize an image from XSS, I encountered a 'TypeError: Cannot call method 'replace' of undefin ...

javascriptnode.jsexpress

Warning: An uncaught promise rejection occurred during the execution of the puppeteer script

While attempting simple web scraping with puppeteer, I encountered an UnhandledPromiseRejectionWarning. Strangely, the exact same code has worked in other projects before. The error message is as follows: node .\scrapers.js (node:9748) UnhandledPro ...

javascriptnode.jsweb-scrapingpromisepuppeteer

Tips for maintaining the reference of a Three.js object after importing it as an .obj file

If you want to learn how to incorporate a .obj file into your scene, the official documentation provides a helpful example that can be found here. const loader = new OBJLoader(); // Load the resource loader.load( // Resource URL 'models/monst ...

javascriptthree.js

Running the Ionic framework in a Docker container does not generate the desired local files or folders

Recently, I've started delving into the world of Docker and I'm attempting to set up a container for building a nodejs and ionic environment. Inside my project directory named DockerEnv, you'll find both a Dockerfile and a docker-compose.ym ...

javascriptnode.jsangulardockerionic2

Discovering tags that are isolated and encasing them with specific tags

After researching Beautifulsoup, I am looking to identify <a> elements that are not nested within <p> tags and then wrap them with <p>, but I am unsure of the process <p><a href="example1.com">example1.com</a></p> ...

pythonhtmlbeautifulsoup

Experiencing difficulties in displaying the alert function

Within this code snippet, a parent component contains a button along with a child component that includes a function to display an alert message. Unfortunately, an error message was encountered: Function components cannot be given refs. Attempts to access ...

javascriptreactjsuse-ref

Expo background fetch initialized but not activated

During the development of my React Native app, I encountered the need to perform periodic background fetches from another server. To achieve this, I utilized two classes from Expo: import * as BackgroundFetch from 'expo-background-fetch'; import ...

javascriptreactjstypescriptreact-nativeexpo

CSS background: seeking a fresh background for the rest of my pages

When I use CSS background: url(stuffhere.jpeg) for the background, it remains unchanged when clicking on other videos categorized as "projects," not pages. I have attempted using <body id="home"> and <body id="projects">, creating two backgrou ...

cssbackground