Creating columns

Question

In the lesson pertaining to turning an un-ordered list into two columns I'm not getting the same effect. I've checked my html and css for inconsistencies but I'm not seeing where I went wrong. Can someone help?

Answer 1 · 2014-05-13T20:51:30Z

May 13, 2014 8:51pm

Your navigation is not styled correctly. It should be set to display inline. You can also compare your code to the project files if that helps.

/**********************************
NAVIGATION
***********************************/

nav {
  text-align: center;
  padding: 10px 0;
  margin: 20px 0 0;
}

nav ul {
  list-style: none;
  margin: 0 10px;
  padding: 0;
}

nav li {
  display: inline-block;
}

Answer 2 · 2014-05-13T20:58:54Z

May 13, 2014 8:58pm

I think that's a step further than I am yet. The project files you linked to aren't helping, it's just notepad text.

Even with the nav suggestion you just made, it didn't change the columns. What I notice is that the footer rises to the top to make the second column...however the second column is supposed to begin with the third image in the gallery.

I'm sorry if I'm just not understanding... Just trying to get a hold on this.

Answer 3 · 2014-05-13T20:18:33Z

May 13, 2014 8:18pm

Most certainly. Could you possibly post your code?

Answer 4 · 2014-05-13T20:21:57Z

May 13, 2014 8:21pm

sure, I'll post the html and the css.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Kary See | Designer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?
family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
     </head>
  <body>
    <header>
        <a href="index.html" id="logo">
          <h1>Kary See</h1>
          <h2>Designer</h2>
        </a>
        <nav>
          <ul>
            <li><a href="index.html" class="selected">Portfolio</a></li>
            <li><a href="about.html">About</a></li>
            <li><a href="contact.html">Contact</a></li>
          </ul>
        </nav>
    </header>
    <div id="wrapper">
      <section>
        <ul id="gallery">
          <li>
            <a href="img/numbers-01.jpg">
              <img src="img/numbers-01.jpg" alt="">
              <p>Experimentation with color and texture.</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-02.jpg">
              <img src="img/numbers-02.jpg" alt="">
              <p>Playing with blending modes in Photoshop.</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-06.jpg">
              <img src="img/numbers-06.jpg" alt="">
              <p>Trying to create an 80's style of glows.</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-09.jpg">
              <img src="img/numbers-09.jpg" alt="">
              <p>Drips created using Photoshop brushes.</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-12.jpg">
              <img src="img/numbers-12.jpg" alt="">
              <p>Creating shapes using repetition.</p>
            </a>
          </li> 
        </ul>  
      </section>
      <footer>
        <a href="http://twitter.com/karysee"><img src="img/twitter-wrap.png" alt="Twitter Logo"></a>
        <a href="http://facebook.com/karysee"><img src="img/facebook-wrap.png" alt="Facebook Logo"></a>
        <p>&copy; 2014 Kary See.</p>
      </footer>
      </div>
  </body>
</html>

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

body {
  font-family: 'Open Sans', sans-serif;
}

#wrapper {
  max-width: 940px;
  margin: 0 auto;
  padding: 0 5%;
  }

a {
  text-decoration: none;
}

img {
  max-width: 100%;
}



/*********************************
HEADING
**********************************/

#logo {
  text-align: center; 
  margin: 0;
}

h1 {
  font-family: 'Changa One', sans-serif;
  margin: 15px 0;
  font-size: 1.75em;
  font-weight: normal;
  line-height: o.8em;
}

h2 {
  font-size: 0.75em;
  margin: -5px 0 0;
  font-weight: normal;
}

/*********************************
NAVIGATION
**********************************/

nav {
  text-align: center;
  padding: 10px 0;
  margin: 20px 0 0;
}

/*********************************
FOOTER
**********************************/

footer {
  font-size: 0.75em;
  text-align: center;
  padding-top: 50px;
  color: #ccc;
}



/*********************************
PAGE: PORTFOLIO
**********************************/

#gallery {
  margin: 0;
  padding: 0;
  list-style: none;
}

#gallery li {
  float: left;
  width: 45%;
  margin: 3.5%;
  background-color: #f5f5f5;
  color: #bdc3c7;
}



/*********************************
COLORS
**********************************/

/* site body */
body {
  background-color: #fff;
  color: #999;
}

/* green header */
header {
  background: #6ab47b;
  border-color: #599a68;
}

/* nav background on mobile */
nav {
background: #599a68;
}

/* logo text */
h1, h2 {
  color: #fff;
}

/* links */
a {
  color: #6ab47b;
}

/* nav link */
nav a, nav a:visited {
color: #fff; 
}

/* selected nav link */
nav a.selected, nav a:hover {
  color: #32673f;
}

Answer 5 · 2014-05-13T20:26:30Z

May 13, 2014 8:26pm

Looks like you're missing the header section so it will float.

header {
  float: left;
  margin: 0 0 30px 0;
  padding: 5px 0 0 0;
  width: 100%;
}

Answer 6 · 2014-05-13T20:30:44Z

May 13, 2014 8:30pm

I added this to my css:

/*********************************
HEADER
**********************************/

header {
  float: left;
  margin: 0 0 30px 0;
  padding: 5px 0 0 0;
  width: 100%
}

and refreshed but nothings changed

Answer 7 · 2014-05-13T20:33:27Z

May 13, 2014 8:33pm

ya, caught that, refreshed, still no change

Answer 8 · 2014-05-13T20:34:36Z

May 13, 2014 8:34pm

does it make a difference that I put my header section after my navigation section, rather than after the heading section?

Answer 9 · 2014-05-13T20:39:45Z

May 13, 2014 8:39pm

Right, so where should the Header section be placed?

ENERAL
**********************************/

body {
  font-family: 'Open Sans', sans-serif;
}

#wrapper {
  max-width: 940px;
  margin: 0 auto;
  padding: 0 5%;
  }

a {
  text-decoration: none;
}

img {
  max-width: 100%;
}



/*********************************
HEADING
**********************************/

#logo {
  text-align: center; 
  margin: 0;
}

h1 {
  font-family: 'Changa One', sans-serif;
  margin: 15px 0;
  font-size: 1.75em;
  font-weight: normal;
  line-height: o.8em;
}

h2 {
  font-size: 0.75em;
  margin: -5px 0 0;
  font-weight: normal;
}

/*********************************
NAVIGATION
**********************************/

nav {
  text-align: center;
  padding: 10px 0;
  margin: 20px 0 0;
}



/*********************************
HEADER
**********************************/

header {
  float: left;
  margin: 0 0 30px 0;
  padding: 5px 0 0 0;
  width: 100%;
}



/*********************************
FOOTER
**********************************/

footer {
  font-size: 0.75em;
  text-align: center;
  padding-top: 50px;
  color: #ccc;
}



/*********************************
PAGE: PORTFOLIO
**********************************/

#gallery {
  margin: 0;
  padding: 0;
  list-style: none;
}

#gallery li {
  float: left;
  width: 45%;
  margin: 3.5%;
  background-color: #f5f5f5;
  color: #bdc3c7;
}



/*********************************
COLORS
**********************************/

/* site body */
body {
  background-color: #fff;
  color: #999;
}

/* green header */
header {
  background: #6ab47b;
  border-color: #599a68;
}

/* nav background on mobile */
nav {
background: #599a68;
}

/* logo text */
h1, h2 {
  color: #fff;
}

/* links */
a {
  color: #6ab47b;
}

/* nav link */
nav a, nav a:visited {
color: #fff; 
}

/* selected nav link */
nav a.selected, nav a:hover {
  color: #32673f;
}

Answer 10 · 2014-05-13T20:41:02Z

May 13, 2014 8:41pm

/**********************************
HEADING
***********************************/

header {
  float: left;
  margin: 0 0 30px 0;
  padding: 5px 0 0 0;
  width: 100%;
}

#logo {
  text-align: center;
  margin: 0;
}

h1 {
  font-family: 'Changa One', sans-serif;
  margin: 15px 0;
  font-size: 1.75em;
  font-weight: normal;
  line-height: 0.8em;
}

h2 {
  font-size: 0.75em;
  margin: -5px 0 0;
  font-weight: normal;
}

Answer 11 · 2014-05-13T20:44:20Z

May 13, 2014 8:44pm

K, did that. There's still no change.

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

body {
  font-family: 'Open Sans', sans-serif;
}

#wrapper {
  max-width: 940px;
  margin: 0 auto;
  padding: 0 5%;
  }

a {
  text-decoration: none;
}

img {
  max-width: 100%;
}



/*********************************
HEADING
**********************************/

header {
  float: left;
  margin: 0 0 30px 0;
  padding: 5px 0 0 0;
  width: 100%;
}

#logo {
  text-align: center; 
  margin: 0;
}

h1 {
  font-family: 'Changa One', sans-serif;
  margin: 15px 0;
  font-size: 1.75em;
  font-weight: normal;
  line-height: o.8em;
}

h2 {
  font-size: 0.75em;
  margin: -5px 0 0;
  font-weight: normal;
}



/*********************************
NAVIGATION
**********************************/

nav {
  text-align: center;
  padding: 10px 0;
  margin: 20px 0 0;
}



/*********************************
FOOTER
**********************************/

footer {
  font-size: 0.75em;
  text-align: center;
  padding-top: 50px;
  color: #ccc;
}



/*********************************
PAGE: PORTFOLIO
**********************************/

#gallery {
  margin: 0;
  padding: 0;
  list-style: none;
}

#gallery li {
  float: left;
  width: 45%;
  margin: 3.5%;
  background-color: #f5f5f5;
  color: #bdc3c7;
}



/*********************************
COLORS
**********************************/

/* site body */
body {
  background-color: #fff;
  color: #999;
}

/* green header */
header {
  background: #6ab47b;
  border-color: #599a68;
}

/* nav background on mobile */
nav {
background: #599a68;
}

/* logo text */
h1, h2 {
  color: #fff;
}

/* links */
a {
  color: #6ab47b;
}

/* nav link */
nav a, nav a:visited {
color: #fff; 
}

/* selected nav link */
nav a.selected, nav a:hover {
  color: #32673f;
}

Welcome to the Treehouse Community

Looking to learn something new?

Karick See

Karick See

Creating columns

11 Answers

Dustin Matlock

Dustin Matlock

Karick See

Karick See

Dustin Matlock

Dustin Matlock

Dustin Matlock

Dustin Matlock

Karick See

Karick See

Dustin Matlock

Dustin Matlock

Karick See

Karick See

Dustin Matlock

Dustin Matlock

Karick See

Karick See

Karick See

Karick See

Dustin Matlock

Dustin Matlock

Karick See

Karick See

Dustin Matlock

Dustin Matlock

Karick See

Karick See