CSS Unused CSS Stages Flexbox and Multi-Column Layout Multi-Column Layout

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

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

//*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


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!


Unfortunately no joy with that one but thanks for the help


2 Answers

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


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

No worries, happens to all of us!

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.