CSS multiple columns: column-span not working

Question

I am using CSS to split a main container into several columns. This works perfectly, but the h1 element should have a colspan. It doesn't. This is my code:

HTML:

<main class="four col">
    <h1>Heading</h1>
    <p>
        Lorem ipsum dolor sit amet
    </p>
</main>

CSS:

main
{
    overflow: hidden;
    width: 100%;
    float: left;
}
.col h1
{
    -moz-column-span:       all;
    -webkit-column-span:    all;
    column-span:            all;
}
.four
{
    width: 66.67%;
}
.col
{
    -moz-column-count:          2;
    -moz-column-gap:        1.5em;
    -webkit-column-count:       2;
    -webkit-column-gap:     1.5em;
    column-count:               2;
    column-gap:             1.5em;
}

Any idea to get this right?

Your title is confusing! are you talking about colspan or column-span? — DrCord
– DrCord, Commented Dec 18, 2013 at 22:15
What browser(s) are you trying it in, column-span is not supported in all browsers: w3schools.com/cssref/css3_pr_column-span.asp — DrCord
– DrCord, Commented Dec 18, 2013 at 22:16
Please don't link to w3schools here, it is a site only useful for bare beginners and should never be used as a professional reference as it is a source of misinformation and bad coding practices. Please use a more correct source like MDN. — Ken Herbert
– Ken Herbert, Commented Dec 18, 2013 at 22:21
column-span, edited that, I'm sorry to have mixed it up. I am using Safari and I know it has worked in my browser. @r3mus: I do not see the difference: I also have a container element with column-count and column-gap; and all child h1 elements should column span all columns. My Lorem ipsum content is of course longer in reality, this is just for not messing it up. — luke
– luke, Commented Dec 18, 2013 at 22:24

honk31 · Accepted Answer · 2016-09-22 09:29:04Z

2

Update 2:

The finally working example:

<main class="four">
  <div class="col">
    <h1>Heading</h1>
    <p>
        Lorem ipsum dolor sit amet
    </p>
  </div>
</main>

Within the same CSS from the question.

Update:

overflow: hidden; float: left; on the css main style was overriding the column-span property. Remove them, it works.

Your code works fine, it's just your CSS is a bit goofy, and the h1 should sit nested inside the classed element. Here's a working example:

HTML

<div class="newspaper">
    <h1>Heading, my glorious long heading.</h1>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.
</div>

CSS

.newspaper
{
    -webkit-column-count:3; /* Safari and Chrome */
    -moz-column-count:3; /* Firefox */
    column-count:3;
}

h1 {
    -webkit-column-span: all;
    -moz-column-span: all;
    column-span: all;
}

Here's a jsFiddle

edited Sep 22, 2016 at 9:29

honk31

4,4873 gold badges34 silver badges35 bronze badges

answered Dec 18, 2013 at 22:29

brandonscript

73.8k35 gold badges179 silver badges240 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

luke Over a year ago

But it is nested inside the main container, or am I missing something?

luke Over a year ago

Maybe I am blind, but I really do not see the difference: I also have a container element main with column-count and column-gap; and all child h1 elements should column span all columns. My Lorem ipsum content is of course longer in reality, this is just for not messing it up.

brandonscript Over a year ago

Call me crazy, but change <main> to <div> -- what happens?

brandonscript Over a year ago

Heh, sorry, my bad. Remove overflow: hidden; from main in your css. Didn't realize that it was applying to the element, not the class, so changing main to div dropped that style.

luke Over a year ago

This helped me a lot. If I append these styles to div or to main, they don't work: overflow: hidden; width: 100%; float: left;. If I comment all of them out, it will work. If I just remove one or two of them, it won't. But I need these styles, especially the float. Any ideas?

|

Collectives™ on Stack Overflow

CSS multiple columns: column-span not working

1 Answer 1

11 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

11 Comments

Your Answer

Sign up or log in

Post as a guest

Related