How do I format these columns?

Question

I have three columns on my contact page, but the headlines are not above the paragraphs and the paragraphs are not as wide as I'd like.

How do I achieve 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>
    <body>
  <div id="wrap">
      <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: $500.00
    </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
**********************/

.content-container {
    display: flex;
    column-count:3;
    column-gap:10px;
    margin-left: 120px;
}
/*********************
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-08T19:56:18Z

November 8, 2014 7:56pm

Jennifer;

A couple of things:

First, it looks like in your css code there is a syntax error in your code:

#secondary-nav {
    text-align: right;
    color:; #332f29; /* Syntax Error here: should be color: #332f29; remove the additional ;
    font-size: .666em;
    margin-right: 25px;
}

Second, in terms of layout, in order to get your columns within your .content-container you should add additional <div> sections to break up your columns. At least that worked for me with your code. Not sure exactly where you wanted them so doing something like:

<div class="content-container">
     <div>
           Column 1
     </div>
     <div>
           Column 2
     </div>
     <div>
           Column 3
     </div>
</div>

and then insert your specific content appropriately.

Happy coding,

Ken

Welcome to the Treehouse Community

Looking to learn something new?

Jennifer Hughes

Jennifer Hughes

How do I format these columns?

1 Answer

Ken Alger

Ken Alger