My code does not support the "column-width" property

Recently, I delved into the world of web-oriented coding and started learning HTML/CSS from a book. Currently, I am navigating through the chapter that covers creating columns and utilizing their properties.

While working on a 3-page website for practice, I encountered an issue when trying to format text into columns. Specifically, setting the column width has me stumped.

Below is the code snippet along with the corresponding CSS:

section {
  column-count: 3;
  column-width: 3em;
}
<! DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title> Test colonne</title>
    <link rel="stylesheet" type="text/css" href="css_colonne.css">
</head>
<body>
<section>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
</section>
</body>
</html>

I'm facing difficulties with setting the column width, and even using -moz-column-width doesn't seem to solve the issue. Can someone spot what's going wrong? Column division works but the formatting just won't comply.

htmlcss

Answer №1

The CSS property column-width is used to define the minimum width of columns.

Learn more about column-width on MDN

View Demo

.wrapper {
  width: 9em;
}
section {
    column-count: 3;
}

To control column width, consider using a container element instead of setting it explicitly.

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

Is there a way to insert a dot after every two digits in a text field using Javascript upon keypress?

When inputting a 4-digit number (e.g. 1234) in my text field with value format 00.00, I want it to automatically adjust to the 12.34 format. How can I achieve this behavior using JavaScript on keyup event? ...

javascriptjqueryhtmlcss

Unlocking the potential of Vue within shadow dom environments

I am facing an issue with a shadow DOM that includes the root element and a Vue component. <template> <div class="container"> <div id="app"></div> </div> <script src="http://my-site.com/app/js/vue-compo ...

javascripthtmlvue.js

Using Vuejs to loop through a table and split cells into unique components

How can I correctly utilize the v-for directive for the given HTML table structure? My goal is to loop through each file in the files array. However, simply adding v-for to the "tr" HTML tag does not produce the desired outcome. <table border="1" a ...

htmlvue.js

Making an item active in Bootstrap with CSS styling

I am working with a group of links: <div class="list-group"> <a href="link1.html" class="list-group-item" id="Home">Link1</a> <a href="link2.html" class="list-group-item">Link2</a> <a href="link3.html" class="l ...

javascripthtmltwitter-bootstrap

How to prevent the toolbar from overlapping with the background image in a reactjs

Hey there, I'm looking to create a toolbar with an image in the background. To achieve this, I've created two separate components. First up is the image component: import React from 'react'; import thepic from '../mypic.jpg'; ...

cssreactjsreact-bootstrapinline-styles

The alignment of the textarea is off due to an issue with the md

I'm experiencing an issue with the alignment of options in my form. The md-maxlength attribute is causing one line to be higher than the rest, as shown in the image below. https://i.sstatic.net/3J3Ts.png My goal is to move that specific textarea one ...

htmlcssangularjs

Experience smooth, seamless scrolling with CSS parallax effect

I'm working on creating a website where the background scrolls slower than the foreground. After exploring different options, I settled on using CSS parallax for this effect. It's working as intended, but there's one issue - it doesn't ...

htmlcssparallax

Positioning the label for a Material-UI text field with an icon adornment when the shrink property is set

https://i.stack.imgur.com/E85yj.png Utilizing Material-UI's TextField, I have an Icon embedded within. The issue arises when the label "Your good name here" overlaps the icon instead of being placed beside it. This problem emerged after I included ...

javascriptcssreactjsmaterial-ui

Adaptable HTML design with alignment features

Here is the structure I am working with: <style> #main { max-width: 500px; margin: 0 auto; overflow: hidden; border: 1px solid red; } #container{ margin-right: -50px; } .block{ display: inline-block; width: 100px; height: 100px; border: 1px solid gr ...

htmlcss

Find the value of an HTML attribute using an XPath expression that includes a colon in the attribute name

Currently, I am using scrapy in combination with selenium and have come across this specific html input element: <input class="anniucssC" type="button" value="当页累计" v:click="doThisPageTtl()"> <input class="anniucssC" type="button" value=" ...

pythonhtmlseleniumxpath

I'm curious about the process behind this. Can I copy a Figma component from a website and transfer it into my

Check out this site for an example: Interested in how uikit.co/explore functions? By hovering over any file, a copy button will appear allowing you to easily paste it into your Figma artboard. Want to know how this works and how to implement it on your o ...

javascripthtmlcss

Using HTML nested lists in Wordpress sites

Working on nested, ordered lists using ol types and encountering an issue where the code appears correctly in Wordpress preview but displays incorrectly in Firefox and IE. The lists are showing as numbered instead of the specified types in the code provide ...

htmlwordpressnested-lists

Why is my Angular router displaying the page twice in the browser window?

Angular was initially loading the page on the default port localhost:4200. I wanted it to serve as localhost:4200/specialtyquestions when the app builds, and that is working, but the pages are appearing twice in the browser. Any ideas on what might have be ...

javascripthtmlangularangular-ui-router

A curated list of Laravel form request validation resources

After researching, I couldn't find any information on how to validate collections in the documentation. In .NET Core, I can easily achieve this by creating a Model with data attributes that automatically bind to the front end model, displaying all err ...

c#phphtmllaravellaravel-blade

Tips for managing post-generated buttons using jQuery?

I've created buttons using JavaScript and added them to my HTML. Now I want to use jQuery to handle the clicks on b_1 and b_2. How can I make this work? $("#mainbutton").click(function (){ document.getElementById("content").innerHTML = '< ...

javascriptjqueryhtml

Restricting ckeditor material while pulling it from a database

Although I know there are similar questions out there, as a newbie, none of them seem to specifically address what I'm trying to achieve. I am currently working on an asp.net MVC 4 application where the content entered by the user in the ckeditor text ...

c#asp.netsqlhtmlasp.net-mvc-4

Initiate a page break at the beginning of the table in case there are not enough lines on the first page

Does anyone know how to ensure that a table starts on a new page when printing, rather than continuing at the bottom of the previous page? I have tables with repeating headers and many rows, and sometimes a new table will start at the very end of a page. ...

htmlcss

"Experience the mesmerizing transition effects of Angular Bootstrap tabs as they gracefully glide in

I am currently working on implementing an animated slide effect when switching between tabs on a webpage. However, I have encountered some difficulties as the animation only seems to work partially. My approach involves using animate.css with the expectat ...

cssangularjstwitter-bootstrapanimation

The dimensions of images and text in HTML

I'm having trouble adjusting my page to fit the resolution of the screen. The image I'm using is 1920 pixels wide, but it's extending beyond the window. Click this link for the code and images: index1.html and style1.css are not needed. < ...

htmlcss

"Exploring the implementation of mute event in Audio HTML5 using JavaScript within an MVC

I am searching for an event that triggers when the mute button is pressed. The volumechange event only works when the volume is adjusted. <audio id="volumeController" onvolumechange="changeVolume()"controls> <source src="~/Sounds/be ...

javascriptc#asp.net-mvchtml