How do I divide my paragraphs into columns using multi-column layout?

Question

Hello! I am trying to make my three paragraphs into columns. I'd like to do this using multi-column layout with column-count, column gap, etc properties, but I am failing to do so. Does anyone know how I can do this? Thanks!!

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Jennifer Hughes</title>
    <link rel="stylesheet" href="css/normalize">
    <link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700|Droid+Serif:400,700|Open+Sans+Condensed:700,300' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/style.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<div id="wrap">
<body>
    <header>
        <h1>CONTACT</h1>
            <div class="main-nav">
                <nav class="primary-nav">
                    <ul id="navigation-items">
                        <li><a href="index.html" class="menuitem">Home</a></li>
                        <li><a href="about.html" class="menuitem">About</a></li>
                        <li><a href="portfolio.html" class="menuitem">Portfolio</a></li>
                        <li><a href="blog.html" class="menuitem">Written Words</a></li>
                    </ul>
                </nav>
            </div>
        </header>
            <div class="content-container">
                <p>
                    If you would like to get a hold of me for any reason, whether it's because you want your own customized portfolio, to make a suggestion, or just to say hello, feel free to drop me a line.
                </p>
            <h2>YOUR OWN PORTFOLIO</h2>
                <p>
                    Are you interested in having a spiffy website of your own? Perhaps you want to be able to direct potential employees to a site that gives them exactly what they want: your resume, your CV, your contact information, and all of your special extras, like your writing samples and the killer Powerpoint you made in high school. (Okay, so maybe they <span>don't</span> want that...) In as little as one day, I can create a website made from the ground up specifically for you.
                </p>
                <p>
                    Cost: 
                </p>
                <P>
                    If you are interseted, please send me an email and we will get to work.
                </p>
            <h2>CONTACT DETAILS</h2>
                <ul id="contact-info">
                    <li class="menu-item10"><a href="tel:503-569-4691">503-569-4691</a><li>
                    <li class="menu-item11"><a href="Hughes064@gmail.com">Hughes064@gmail.com</a><li>
                </ul>
        </div><!--end of content-container-->
            <footer>
                <p>&copy; 2014 JennHughesDesign.</p>
            </footer>
        </div>
    </body>
</html>

/*********************
GENERAL
**********************/

.wrap {margin: 0 auto;}

body    {
    margin: 0px;
    font-family: 'Open Sans Condensed', sans-serif;
    background-color:#F9FADD;
    font-size: 1.125em;
}

#secondary-nav {
    text-align: right;
    color:; #332f29;
    font-size: .666em;
    margin-right: 25px;
}


h1 {
    font-size: 4em;
    text-transform: lowercase;
    font-family: 'Open Sans Condensed', sans-serif;
    background-color: #FB1B40;
    color:#D4CEAC;
    text-align: center;
    width: 650px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 75px;}


footer {
visibility: hidden;}    

/*********************
HOME PAGE
**********************/

img {
    width: 778px;
    height: 547px;
}

img.align-center {
    display: block;
    margin: 0 auto;}

/*********************
HYPERLINKS
**********************/

li .menuitem
 {color: #332f29;}


ul {list-style-type: none;}

li .selected {
    color:#8fa68e;
}

nav li {
    list-style-type: none;
    font-size: 1.111em;
    display: inline-block;
    margin-right: 50px;
}

li.publications {
    display: block;
}

a.publications {
    text-decoration: none;
    font-size: 1em;
    line-height: 2.4em; 
}

a:hover {color:#d4ceac;}

a:hover.publications {color:#d4ceac;}

a {text-decoration: none;}

.main-nav
    {text-align: center;
    padding: 25px;
    margin-top: -50px;
    width: 800px;
    margin-right: auto;
    margin-left: auto;
    }

.booklink {font-weight: bold;}

/*********************
ABOUT
**********************/
p {
    margin-left: 35px;
    height: 40%;
    width: 40%;
    font-family: sans-serif;
    line-height: 1.4em;
}

p#aboutme {margin: 10px auto;}

/*********************
PORTFOLIO
**********************/


h2 {
    margin-left: 75px;
    font-size: 1.666em;
    text-decoration: underline;

}

.main-content {
    margin-left: 120px;}

li .publications {
    font-weight: bold;
    color: #332f29;
}

.main-content {
    display: flex;
    justify-content: space-around;}

.col li {flex-grow:1;

}

#webpara {
    font-family: sans-serif;
    width:600px;
}

/*********************
BLOG
**********************/ 
#blogpara {
    font-family: sans-serif;
    width: 250px;
    text-align: center;
}

p#blogpara {
    margin: auto;
}


/*********************
CONTACT
**********************/


/*********************
MEDIA QUERIES
**********************/ 



@media screen and (max-width: 599px){
body {
    font-size: 1em;
}
.wrap {
    max-width: 85%
}
}
@media screen and (max-width: 980px){
.wrap {
    max-width: 600px;
}
}

@media screen and (max-width: 999px) {
    .main-content {
        -webkit-flex-direction:column;
    }
}

Answer 1 · 2014-11-07T23:06:02Z

November 7, 2014 11:06pm

I'm maybe not the best person to answer that... but whenever I have a problem I just keep playing with it until I understand whats happening and get a handle on the problem.

One thing I would say about my CSS experience is go through you html and code and strip out anything that isn't being used, check your names of selectors you are using and make sure they match up with your css, really plan your structure and how it's going to work before you actually make it... so like get a pen and paper and work out borders etc and how you want it to work before you go and code it. That way you can be far more efficient and streamlined in your approach to css.

Another tip would be I always use chrome to tell me whats going on with borders, padding etc in my page so I can get a visual picture along with my pen and paper design.

Hope this is helpful

Answer 2 · 2014-11-07T22:32:23Z

November 7, 2014 10:32pm

Hi Jennifer, there is a great video on this in the css deep dive. Check that out sometime if you haven't already.

From a quick look I think you have .main-content 2 times in your CSS but there it doesn't exist in your HTML anywhere. I changed your CSS to this and got 3 columns...

.content-container {
    display: flex;
    column-count:3;
    column-gap:10px;
    margin-left: 120px;
}

also watch out because your P tags have a margin left which is causing problems for the column gaps.

Good Luck

Answer 3 · 2014-11-07T22:47:12Z

November 7, 2014 10:47pm

Thanks, I appreciate your help. Any insight on where I can now learn how to format those columns? I've watched the Deepdive on Flexbox and Multi-Column layout, but it doesn't address what I am trying to resolve. Perhaps it has to do with the P tags, like you mentioned...What is a good resource for understanding how to fix that?

Welcome to the Treehouse Community

Looking to learn something new?

Jennifer Hughes

Jennifer Hughes

How do I divide my paragraphs into columns using multi-column layout?

3 Answers

Aaron Watson

Aaron Watson

Jennifer Hughes

Jennifer Hughes

Aaron Watson

Aaron Watson

Jennifer Hughes

Jennifer Hughes