Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

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

Posted by marvelousperson206
marvelousperson206
9,199 Points

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
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].

Ted Sumner
PLUS
Ted Sumner
Courses Plus Student 17,967 Points
Ted Sumner
Ted Sumner
Courses Plus Student 17,967 Points

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.....

marvelousperson206
marvelousperson206
9,199 Points

Brackets hey? Might have to look into that!

Brad Lacke
Brad Lacke
7,438 Points
Brad Lacke
Brad Lacke
7,438 Points

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

Ted Sumner
PLUS
Ted Sumner
Courses Plus Student 17,967 Points
Ted Sumner
Ted Sumner
Courses Plus Student 17,967 Points

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.

marvelousperson206
marvelousperson206
9,199 Points
marvelousperson206
marvelousperson206
9,199 Points

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..