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 Unused CSS Stages Flexbox and Multi-Column Layout Multi-Column Layout

Posted by Craig Watson
Craig Watson
27,930 Points

Not getting the fixed column width??

Hi all,

I've been playing around with styles on the flexbox module and I am struggling to get the fixed column width..

Here my code, is something over riding it / have i made a rookie error ...?

css
//* this file is named page-styles.css 1st link in head on .html *//

body {
    background-color: steelblue;
}

.main {
    width: 70%;
    height: auto;
    padding: 25px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 25px;
    background-color: lightgrey;
    border-radius: 15px;
}

Then I have the this.....

css
//*this file is named styles.css 2nd link on .html *//

.main {
    -webkit-column-count: 3;
    -webkit-column-gap: 3em;
    -webkit-column-rule: 2px solid darkblue;
    -webkit-cloumn-width: 250px;
}

Any advice on this one will be much appreciated??

Thanks Craig

Brent Cralley
Brent Cralley
18,541 Points

Craig,

Have you tried taking out the "width: 70%;" value in your first CSS image, and seeing if the widths stay fixed after that?

That's all this noob can guess. Good luck with it!

-Brent

Craig Watson
Craig Watson
27,930 Points

Unfortunately no joy with that one but thanks for the help

Craig!

2 Answers

Tara Toler
Tara Toler
4,336 Points

Hi Craig,

There is a typo in the code you posted:

-webkit-cloumn-width: 250px;

I'm a noob too, but otherwise, it looks correct to me. :)

Tara

Craig Watson
Craig Watson
27,930 Points

Its painful when something so obvious is pointed out that I had spelt correctly only a few lines above ...

not my greatest moment haha

Thanks Tara!!

Tara Toler
Tara Toler
4,336 Points

No worries, happens to all of us!

Aaron Lafleur
Aaron Lafleur
10,474 Points
Aaron Lafleur
Aaron Lafleur
10,474 Points

I'm not real sure, but I think you may have to specify display: flex; in your container div. Not positive. Been a while since I've messed with CSS.