Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS CSS - Beyond the Basics Understanding Flexbox and Multi-Column Layout Multi-Column Layout

Column-span not working

I'm towards the end of this, all working great, except now that we've inserted the H1 and using column-span it seems to have no effect.

<!DOCTYPE html>
<html>
<head>
    <title>Multi-column Layout</title>
    <link rel="stylesheet" type="text/css" href="page-styles.css">
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div class="main">
    <h1>Lorem ipsum dolor sit amet</h1>
        <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.
        <p>
                <img src="img/sky.jpg" alt="">
        <p>
            Mauris ac leo id risus commodo auctor at at eros. Proin ultricies ante vel eros egestas vel venenatis arcu consequat. Nam auctor eros vitae nisl viverra sit amet malesuada turpis facilisis. Nullam diam dolor, aliquet vitae pellentesque blandit, varius at arcu. Proin convallis varius sollicitudin. Sed accumsan posuere eros quis placerat. Vestibulum sit amet malesuada elit. Quisque commodo egestas adipiscing. Nunc et neque non nisi consequat porta.
        </p>
        <p>
            Pellentesque non ultrices nisi. Ut auctor, massa vel hendrerit consectetur, augue mi vestibulum nibh, vitae ullamcorper lectus nisl in felis. Duis magna enim, elementum a sagittis aliquet, mattis quis erat. Sed imperdiet pulvinar fermentum. Integer posuere tellus vel eros ornare eu accumsan justo semper.   
        </p>
    </div>
</body>
</html>
.main {
  -moz-column-gap: 3rem;  
  -moz-column-rule: 2px dotted #070641;
  -moz-columns: 175px 3;
}

img {
  display: block;
  margin: 1.5rem 0;
  max-width: 100%;
}

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

Not sure why this won't work?

4 Answers

christophe Bonge
christophe Bonge
6,618 Points

hi, don't know if you solve the issue, but actually firefox doesn't support this property : [https://developer.mozilla.org/en-US/docs/Web/CSS/column-span].

I have switched to Chrome for my Treehouse and dev work. I like to use Brackets for my text editor and it has a live update feature that only works with Chrome. I don't like Google tracking my info, though.....

Brackets hey? Might have to look into that!

Brad Lacke
Brad Lacke
7,438 Points

+1 for Brackets. I've tried them all, and this one is my favorite.

According to MDN, the prefix is -webkit, not -moz. Also, IE does not require the prefix, so if this is for a quiz you may need an entry without the prefix also.

That is odd. I used -moz- because the teachers notes included this reference http://caniuse.com/#feat=multicolumn. Plus I am using Firefox. It says it has partial support using -moz- prefix but doesn't mention anything about column-span being affected due to partial support. Oh well I'll switch to Chrome for this one I guess..